定位、相对定位、绝对定位

我们可以使用css的position属性来设置元素的定位类型, postion的设置项如下

relative：生成相对定位元素，所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
absolute： 生成绝对定位元素，元素脱离文档流，不占据文档流的位置,可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素来进行定位,如果找不到，则相对于body元素进行定位。
fixed： 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
static：默认值,没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
inherit： 从父元素继承position属性的值。

定位元素的偏移

定位的元素还需要用left、right. top或者bottom来设置相对于参照元素的偏移值。

相对定位

left：相对于左边向右偏移XXpx
top：相对于顶部向下偏移XXpx

绝对定位

left：上一个设置定位的父级元素相对于左边向右偏移XXpx，如果没有父级元素定位，则相对于body偏移
top：上一个设置定位的父级元素相对于顶部向下偏移XXpx，如果没有父级元素定位，则相对于body偏移

定位元素层级

位元素是浮动的正常的文档流之上的,可以用z-index属性来设置元素的层级

定位元素的特性

绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素（不设置宽高，大小由内容决定）
绝对定位和固定定位后，该元素margin:50px auto 0 无法水平居中，因为auto失效，其他仍可用margin-left

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位</title><style type="text/css">.con{width: 400px;height: 400px;border: 1px solid black;margin: 50px auto 0;/*position: relative; 父级定位*/}.box01,.box02,.box03{width: 300px;height: 100px;margin: 10px;}.box01{background-color: green;position: relative;  /*相对定位*/left: 50px;  /*相对于左边向右偏移50px*/top: 50px;  /*相对于顶部向下偏移50px*/}.box02{background-color: gold;position: absolute;  /*绝对定位*//*父级元素.con没有设置定位，则相对于body进行偏移*/left: 50px;  /*相对于body向右偏移50px*/top: 50px;  /*相对于body向下偏移50px*/}.box03{background-color: blue;position: fixed;  /*固定定位*/left: 100px;  /*相对于浏览器窗口向右偏移100px*/top: 100px;  /*相对于浏览器窗口向下偏移100px*/}</style>
</head>
<body><div class="con"><div class="box01"></div><div class="box02"></div><div class="box03"></div></div>
</body>
</html>

相对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位层级关系</title><style type="text/css">.con{width: 400px;height: 400px;border: 1px solid #000;margin: 50px auto 0;position: relative; /*设定绝对定位的参照点*/}/*定义四个div元素的大小和绝对定位元素属性*/.con div{width: 200px;height: 200px;position: absolute;}.box01{background-color: green;left: 20px;  /*相对父级元素.con位置相对于左边向右偏移20px*/top: 20px;  /*相对父级元素.con位置相对于上边向下偏移20px*/z-index: 10;  /*设置层级为10 = 置顶，默认层级＜10*/}.box02{background-color: gold;left: 40px;top: 40px;}.box03{background-color: blue;left: 60px;top: 60px;}.box04{background-color: pink;left: 80px;top: 80px;}</style>
</head>
<body><div class="con"><div class="box01"></div><div class="box02"></div><div class="box03"></div><div class="box04"></div></div>
</body>
</html>

定位实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位实例</title><style type="text/css">.con{width: 100px;height: 100px;background-color: gold;margin: 50px auto 0;position: relative;border-radius: 14px;  /*半径14的圆角，除非半径50才能成圆*/}.box{width: 28px;height: 28px;background-color: red;color: white;text-align: center;line-height: 28px;position: absolute;right: -14px;top: -14px;border-radius: 14px;  /*半径14的圆*/}</style>
</head>
<body><div class='con'><div class="box">5</div></div></body>
</html>

定位元素的特性，定位居中、弹窗实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>定位实例</title><style type="text/css">.con{width: 960px;height: 80px;background-color: gold;/*margin: 50px auto 0;  auto水平居中失效*/position: fixed;  /*固定定位，当前屏幕*//*水平居中*/top: 0px;left: 50%;  /*偏移浏览器的一半位置*/margin-left: -480px;  /*再偏移父元素一半宽度*/}/*锁定父元素，下拉不消失*/p{text-align: center;}.popup{width: 500px;height: 300px;border: 1px solid #000;background-color: #fff;position: fixed; /*固定定位，当前屏幕*/left: 50%;margin-left: -251px;  /*水平居中*/top: 50%;margin-top: -151px;  /*垂直居中*/z-index: 9999  /*置于最前面*/}.popup h2{background-color: gold;margin: 10px;height: 40px;}.mask{position: fixed;width: 100%;height: 100%;background-color: #000;left: 0px;top: 0px;opacity: 0.5;  /*透明度50%*/z-index: 9998;}.pop_con{display: none;  /*隐藏*/display: block;  /*显示*/}</style>
</head>
<body><div class='con'>1111</div><div class="pop_con"><div class="popup"><h2>弹窗标题</h2></div><div class="mask"></div></div><p>网页文字</p><br /><br /><br /><br /><br /><br /><p>网页文字</p><br /><br /><br /><br /><br /><br /><p>网页文字</p><br /><br /><br /><br /><br /><br /><p>网页文字</p><br /><br /><br /><br /><br /><br /><p>网页文字</p><br /><br /><br /><br /><br /><br /><p>网页文字</p><br /><br /><br /><br /><br /><br /><p>网页文字</p><br /><br /><br /><br /><br /><br /></body>
</html>

定位、相对定位、绝对定位相关推荐

CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
CSS定位—静态定位、相对定位、固定定位、绝对定位、粘性定位
CSS定位定位是可以让盒子自由自在的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子. 定位的组成定位是将盒子定位在某一位置.按照定位的方式移动盒子. 定位=定位模式+边偏移. ...
汇川H3U标准程序，程序有本体脉冲控制的三轴定位，有总线控制的汇川伺服定位，轴点动，回零，相对定位绝对定位
汇川H3U标准程序,程序有本体脉冲控制的三轴定位,有总线控制的汇川伺服定位,轴点动,回零,相对定位绝对定位,程序结构清晰,分模块控制,是工控者学习的好案例. YID:6229641434050887自 ...
汇川H3U标准程序，程序有本体脉冲控制的三轴定位，有总线控制的汇川伺服定位，轴点动，回零，相对定位绝对定位，程序结构清晰，分模块控制，是工控者学习的好案
汇川H3U标准程序,程序有本体脉冲控制的三轴定位,有总线控制的汇川伺服定位,轴点动,回零,相对定位绝对定位,程序结构清晰,分模块控制,是工控者学习的好案例.
相对定位绝对定位固定定位元素的层级
相对定位&绝对定位&固定定位&元素的层级&opacity元素的透明背景相对定位 <!DOCTYPE html> <html lang="e ...
CSS之定位（定位/相对定位）
定位/相对定位: <!DOCTYPE html> <html><head><meta charset="utf-8" /><t ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
【CSS】定位--静态定位-相对定位-绝对定位-子绝父相-固定定位-粘性定位
文章目录 1. 为什么需要 2. 定位组成定位 = 定位模式 + 边偏移 2.1 定位模式 2.2边偏移 3. 静态定位 static (了解) 4. 相对定位 relative (重要) 5. 绝 ...

定位、相对定位、绝对定位

定位、相对定位、绝对定位相关推荐

最新文章

热门文章