position定位

来源：互联网发布：mac steam游戏目录编辑：程序博客网时间：2024/05/16 14:54

子元素使用绝对定位时(position:absolute),父元素必须加上定位属性,一般为相对定位(position:relative) ps:为绝对定位找爹

①定位元素位置控制

top,left,bottom,right //设置这些后，元素在原来的位置发生位移

②position:absolute绝对定位(相对于文档进行位移)

a.使元素完全脱离文档流；

b.使内嵌元素支持宽高；

c.使块标签内容撑开宽度

d.如果有定位父级，子元素相对于父级元素定位，否则默认相对document定位

③定位层级(z-index:1)(妙味htmlcss基础)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>#div1{width: 300px;height: 100px;background: red;position: absolute; z-index: 1;/*跟着绝对定位*//*1. 加上绝对定位后，div1浮动起来脱离文档流，div2就朝上移动100px*/}#div2{width: 200px;height: 200px;background: blue;position: relative;/*2.div2加上相对定位后,盖住div1*/}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>

④position：fixed(固定定位)

a.特性与绝对定位相同，但不同点为“始终相对于document定位”

b.IE6不支持

0 0