【前端】CSS定位

四通一达小新星 2020-11-13 03:08:30
前端 css CSDN 定位


初级开发者,文章有不当的地方请各位大佬指点,谢谢!


1. 为什么要使用定位?

在这里插入图片描述

  • 如果我们需要实现上面的效果,使用标准流和浮动使无法实现的。
  • 但是定位就可以实现将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面。
  • 浮动的盒子是压不住img这样的元素的。

2. 定位的4中分类

语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
  • 在 CSS 中,通过 position 属性定义元素的定位模式,语法如下:
选择器 {
 position: 属性值; }

3. 4种定位各自的特点

  • 静态定位
    (1) 静态定位是元素的默认定位方式,无定位的意思。它相当于 border 里面的none, 不要定位的时候用。

    (2)静态定位 按照标准流特性摆放位置,它没有边偏移。

    (3)静态定位在布局时我们几乎不用的

  • 相对定位

    (1)相对定位是元素相对于它 原来在标准流中的位置 来说的;

    (2)相对于 自己原来在标准流中位置来移动的;

    (3)原来在标准流的区域继续占有,后面的盒子仍然以标准流的方式对待它。

  • 相对定位示例:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位示例</title>
<style>
div {

width: 300px;
height: 300px;
background-color: #f00;
margin: 100px;
position: relative;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

在这里插入图片描述

  • 分析: 相对定位是相对于盒子原来的位置进行定位的,由于为盒子添加了margin(外边距),盒子的起始位置不再是浏览器的左上角,盒子的起始变为 (100,100) ,此时相对定位的起始位置就变成了(100,100)。

  • 绝对定位

    (1)绝对定位是元素以带有定位的父级元素来移动位置

    (2)完全脱标(脱离标准流) —— 完全不占位置;

    (3)父元素没有定位,则以浏览器为准定位(Document 文档)。

  • 绝对定位示例(当父盒子没有定位但是子盒子有定位的情况)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例(父盒子没有定位)</title>
<style>
/*此示例是父盒子没有定位的情况:此时的子盒子将以浏览器为基准进行定位*/
.father {

width: 300px;
height: 300px;
margin:100px
background-color: #f00;
}
.son {

position:absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: #ff0;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述

  • 绝对定位示例 (当父子盒子都有定位的情况)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位示例(父子盒子都有定位)</title>
<style>
/*此示例是父子盒子都是有定位的情况下,此时的子盒子会参照父盒子进行定位*/
.father {

width: 300px;
height: 300px;
background-color: #f00;
margin: 100px;
position: relative;
}
.son {

width: 100px;
height: 100px;
background-color: #ff0;
position:absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

在这里插入图片描述

  • 绝对定位示例(父盒子没有定位 , 但是父盒子的父盒子和子盒子有定位)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位(父盒子没哟定位,但是父盒子的父盒子和子盒子有定位</title>
<style>
.grandFather {

width: 500px;
height: 500px;
background-color: #f00;
margin: 100px;
position: relative;
}
.father {

width: 300px;
height: 300px;
background-color: #0f0;
}
.son {

width: 100px;
height: 100px;
background-color: #00f;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="grandFather">
<div class="father">
<div class="son"></div>
</div>
</div>
</body>
</html>

在这里插入图片描述

  • 分析: 绝对定位是以带有定位的父级元素来定位的,如果父级元素没有定位,则以浏览器文档为基准进行定位,其中的父元素不仅仅是上一级的父级元素,也可以是 ‘爷爷级’ 元素,如果是父级元素没有定位,但是 ‘爷爷级’ 元素又定位它则会根据**‘爷爷级’** 元素进行定位。

  • 绝对定位注意:
    (1)绝对定位的定位口诀是 子绝父相

  • 为什么子盒子绝对定位父盒子要使用相对定位呢?

    (1)绝对定位的元素是不占据位置的,是脱离标准流的,相对定位的元素是占据位置的,会影响后面元素的显示。

    (2)相对定位占据位置,按照标准流正常显示,后面的盒子按照正常显示。如果父盒子不使用相对定位而使用绝对定位,此时后面的盒子就会出现在父盒子的下方,不能按照正常显示。

    (3)子盒子使用绝对定位就可以使盒子脱离标准流显示,实现一些特殊效果。
    在这里插入图片描述

  • 使用子绝父相实现图片上方悬浮的小按钮效果:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子绝父相示例</title>
<style>
.up {

width: 1000px;
height: 90px;
position: relative;
}
.arr-l {

position: absolute;
top: 25px;
left: 0;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 222, .7);
}
.arr-r {

position: absolute;
top: 25px;
right: 0;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 222, .7);
}
.down {

width: 1000px;
height: 150px;
margin: 10px 0;
background-color: #000;
}
</style>
</head>
<body>
<div class="up">
<img src="../images/img.jpg" alt="">
<div class="arr-l"></div>
<div class="arr-r"></div>
</div>
<div class="down"></div>
</body>
</html>

在这里插入图片描述


  • 固定定位
    (1)固定定位绝对定位的一种特殊形式: (认死理型) 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形

    (2)完全脱标 —— 完全不占位置;

    (3)只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置;

     - 跟父元素没有任何关系;单独使用的
    - 不随滚动条滚动。
    
  • 固定定位示例(固定定位与父元素没有任何关系)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位(固定定位与父盒子是没有任何关系的)</title>
<style>
.box {

position: relative;
width: 300px;
height: 300px;
margin: 100px auto;
background-color: #ff0;
}
.box img {

position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/sun.jpg" alt="猴子" width="150">
</div>
</body>
</html>

在这里插入图片描述

  • 固定定位示例(固定定位的元素值认识浏览器的可视窗口)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位(固定定位只认浏览器的可视窗口)</title>
<style>
.box {

width: 300px;
height: 300px;
background-color: #ff0;
margin: 100px auto;
}
.box img {

position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/sun.jpg" alt="" width="150">
</div>
</body>
</html>

在这里插入图片描述

  • 分析: 固定定位的元素与父元素没有任何的关系,固定定位的元素其实为浏览器可视窗口。在什么位置显示主要根据边偏移确定。top bottom left right
版权声明
本文为[四通一达小新星]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_41319058/article/details/104128162

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple