HTMl中position位置属性介绍
今天在⽹上了关于position⽤法的总结。
position属性值的定义：
1、static：默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。
2、relative：⽣成相对定位的元素，通过top,bottom,left,right的设置相对于其正常位置进⾏定位。可通过z-index进⾏层次分级。
3、absolute：⽣成绝对定位的元素，相对于static定位以外的第⼀个⽗元素进⾏定位。元素的位置通过"left","top","right"以及"bottom"属性进⾏规定。可通过z-index进⾏层次分级。
4、fixed：⽣成绝对定位的元素，相对于浏览器窗⼝进⾏定位。元素的位置通过"left","top","right"以及"bottom"属性进⾏规定。可通过z-index 进⾏层次分级。
static与fixed的定位⽅式较好理解，在此不做分析。下⾯对应⽤的较多的relative和absolute进⾏分析：
docproperty什么意思1、relative。
tortoisegit使用详解
定位为relative的元素脱离正常的⽂本流中，但其在⽂本流中的位置依然存在。如图1：
黄⾊背景的层定位为relative，红⾊边框区域为其在正常流中的位置。在通过top、left对其定位后，从灰⾊背景层的位置可以看出其正常位置依然存在。
2、absolute。
定位为absolute的层脱离正常⽂本流，但与relative的区别是其在正常流中的位置不在存在。如图2：
可以看到，在将黄⾊背景层定位为absolute后，灰⾊背景层⾃动补上。
3、relative与absolute的主要区别：
⾸先，是上⾯已经提到过的在正常流中的位置存在与否。
小众颜名称>易语言觅风论坛其次，relative定位的层总是相对于其最近的⽗元素，⽆论其⽗元素是何种定位⽅式。如图3：
图中，红⾊背景层为relative定位，其直接⽗元素绿⾊背景层为默认的static定位。红⾊背景层的位置为相对绿⾊背景层top、left个20元素。⽽如果红⾊背景层定位为absolute，则情形如图4：
可以看到，红⾊背景层依然定义top:20px；left:20px；但其相对的元素变为定位⽅式为absolute或relatiposition和location的区别
ve的黄⾊背景层。因此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的⽗层，⽽这个⽗层并不⼀定是其直接⽗层。如果其⽗层中都未定义absolute或relative，则其将相对body进⾏定位，如图5：
除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。图数据库是什么

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。