Position定位

来源：互联网发布：ubuntu设置用户根目录编辑：程序博客网时间：2024/06/16 09:39

Position定位

static、fixed、relative、absolute.

static（静态定位）它是position 的默认值，任意的position:static的元素是不会被特殊定位的。它表示的是出现的正常的流中（忽略了top,left,right,bottom或者是z-index的声明，如果使用了position:static的话，以上说的属性就是不会起作用的。）
relative（相对定位）：relative表现是和static是一样的，除非我们自己添加一些额外的属性。它是生成相对定位的元素，通过top,bottom,left,right的设置相对于其正常（原先本身的）位置进行定位的。就是总的来说是根据自己本身的定位相对移动的。并且是可以通过z-index来进行层次的分级。虽然定位为relative的元素是会偏离正常的文本流当中，但是其在文本流位置是依然存在的。其他的元素是不会受该元素的影响的，浏览器中还是会给这个偏离正常流元素一个位置。

<style>.relative1 {    position: relative;    border:1px black solid;}.relative2 {    position: relative;    top: 20px;    left: 20px;    background-color: white;    width:100px;    height:100px;    border:1px red solid;}.relative3{    width:200px;    height:100px;    border:1px blue solid;    position:relative;}</style></head><body>    <div class="relative1">        relative1        <div class="relative2">            relative2        </div>        <div class="relative3">            relative3        </div>    </div></body></html>

我这里设置了relativel是父元素，其他是子元素。我将父元素设置为position:relative，如果我们没有给他添加额外的属性的话，那么父元素的宽度就是撑满整个浏览器的窗口了，但是如果给父元素设置宽度的大小的话，那么宽度就不是撑满整个浏览器的窗口，所以说它跟static的表现是一样的。

但是如果父元素设置为position:absolute的话，即使没有给他设定宽度，它的宽度也不会是撑满整个浏览器窗口的。

并且当relative1是relative2的父元素，但是不是relative3的父元素的时候，就会产生这样的效果的
这里写图片描述
relative2像在漂浮在上层一样，所以我们是可以使用z_index来设置分层的。

absolute （绝对定位）是脱离正常的文本流，与relative的区别是其在正常流中的位置是不再存在的。例如我们relativel设置为relative，relative2设置为absolute，relative3也设置为absolute，然后就会出现这个效果的。relative2与relative3都相叠在一起，因为他们都设为position：absolute。所以他们在正常流中的位置是不再促在的，只能被其他元素占用的。

这里写图片描述

fixed 一个固定定位元素会相对于浏览器来定位的，这意味着如果页面滚动的话，它还是会停留在相同的位置上的，而且top,right,botton和left属性都是可以使用的。一个固定的元素是不会保留它原有的位置的，这也是脱离文本流的。

需要注意的是，父子关系是无法用z-index来设定上下关系的，一定是子级在上父级在下

阅读全文

0 0