1200字范文 > position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；

position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；

时间：2022-06-09 18:39:33

position 属性：

position常见的定位模式：

定位模式装换：跟浮动一样，元素添加了绝对定位和固定定位之后，元素模式也会发生转换，都转换为行内块模式，display依然是block ,但是可以和其他的行内元素同一行显示，也可以和同样添加了浮动的元素及添加浮动的元素同一行显示。

添加了定位和浮动的元素，会进行隐式的转换为display:inline-block,那么行内元素可以设置宽高，块级元素可以同一行显示。

添加了定位的元素，z-index默认为0，可以设置z-index 的值来显示元素的层级关系，z-index 越大，越在上层，离眼睛越近，z-index 可以为正数，也可以是负数。

relative：相对定位

相对定位 <===> position: relative;

移动方式

是相对于自己的左上角开始移动

代码：

<style>div {width:200px;height:200px;}.top{position: relative; /*给上面的div 添加相对定位 */top:100px;/*向下移动100px(相对于自己的左上角移动)*/left: 100px; /*向右移动100px(相对于自己的左上角移动)*/background-color:rosybrown;}.bottom{background-color:sienna;}</style><body><div class="top">上</div><div class="bottom">下</div></body>

效果：下面的div并没有向上移动，说明添加了相对定位的元素，它在文档流中的位置仍然保留，是以自己的原来的左上角为基点移动.

absolute: 绝对定位和居中问题

绝对定位 <===> position: absolute;

注意：加了绝对定位的盒子，margin：auto 无效，可以使用一下方法可以实现水平居中和垂直居中

.div{position: absolute; /*子级元素添加了绝对定位*/top: 50%; /*相对于父级元素向下移动50%*/left: 50%; /*相对于父级元素向右移动50%*/width: 200px;height: 200px;/*向上移动100px(heitht/2) 先左移动100px(width/2) */margin: -100px 0 0 -100px; background: #aaa;}

移动方式：

父级和祖级元素没有定位，或者没有父级元素，则以浏览器当前屏幕为准对齐(document文档)。就是以body 的左上角为基点移动。

代码

<style>.top {position: absolute;// 绝对定位top: 100px;// 向下移动100pxleft: 100px; //向右移动100pxwidth: 200px;height: 200px;background: rgb(214, 139, 139);}.bottom {width: 200px;height: 200px;background: #aaa;}</style><body><div class="top">top</div><div class="bottom">bottom</div></body>

效果：可以看出，添加了绝对定位的元素，完全脱标，完全不占位置。被下面的div 占据了以前的位置。

父级有定位

代码：

.father {position:relative; /*父级元素添加了定位*/width: 300px;height: 300px;background: rgb(214, 139, 139);}.son {position: absolute; /*子级元素添加了绝对定位*/top:50px; /*相对于父级元素向下移动50px*/left:50px; /*相对于父级元素向右移动50px*/width: 200px;height: 200px;background: #aaa;}</head><div class="father">小头爸爸<div class="son"> 大头儿子</div></div>

效果：如果父级元素添加了定位，那么绝对定位的元素就以离自己最近的有定位的父级元素为基点移动

fixed：固定定位

固定定位 <===> position: fiexd

移动模式

偏移定位是以窗口为参考

随窗口的滚动，一直决定在一个位置

Z-index

z-index属性设定了一个定位元素及其后代元素或 flex 项目的 z-order。当元素之间重叠的时候， z-index较大的元素会覆盖较小的元素在上层进行显示。

简单的说，就是一个三维空间，X-Y表示的是盒子（一个二维的图形）,Z表示在空间上的位置，该属性设置一个定位元素（Z-index 仅能在定位元素上奏效（例如 position:absolute;））沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。如果取值相同，则根据书写顺序，后来居上。

代码：

<style>div {position: absolute;width: 100px;height: 100px;}.one {top: 20px;background-color: lightskyblue;}.two {top: 40px;left: 20px;background-color:magenta}.three {top: 60px;left: 40px;background-color:rgb(113, 113, 170);}.four {top: 80px;left: 80px;background-color: orange;}</style><body><div class="one">1</div><div class="two">2</div><div class="three">3</div><div class="four">4</div></body>

效果：Z-index默认都是0，值相同，则根据书写顺序，后来居上，所以1在最下面，4在最上面。

设置z-index的值

代码：

<style>div {position: absolute;width: 100px;height: 100px;}.one {top: 20px;z-index:4;background-color: lightskyblue;}.two {top: 40px;left: 95px;z-index:3;background-color:magenta}.three {top: 60px;left: 185px;z-index:2;background-color:rgb(113, 113, 170);}.four {top: 80px;left: 275px;z-index:1;background-color: orange;}</style><body><div class="one">1 z-index:4</div><div class="two">2 z-index:3</div><div class="three">3 z-index:2</div><div class="four">4 z-index:1</div></body>

效果

z-index后面数字一定不能加单位,其取值可为正整数、负整数和0。

MDN web 文档.

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。