文章目录
定位(postion ) )
个人资料
静态定位(静态) )。
相对位置(相对) )
绝对位置(absolute ) ) )。
定位固定(固定) ) ) ) ) )。
四个定位总结
堆叠顺序(z-index ) )。
中央配置
定位(postion ) )
个人资料
确定布局方法。
指定位置后，可以将元素放置在页面上的任意位置。
打开元素的放置后，可以通过偏移设置位置。
CSS位置属性
属性
说明
静态
静态位置，默认
可撤销
相对位置，相对于文档流的位置对齐
absolute
绝对位置。 相对于位于前面的父元素定位
固定的
相对于浏览器窗口的固定位置
边偏移
属性
说明
顶级的
顶部偏移
汤姆先生
顶部偏移
左后卫
左侧偏移
光之美少女
右侧偏移
静态定位(静态) )。
静态放置是所有元素的默认放置方法。
如果position属性为静态，则可以打开元素的静态位置
静态位置是每个元素在HTML文档流中的默认位置。
在静态放置中，不能通过边偏移属性更改元素的位置。
相对位置(相对) )
相对位置是相对于元素在标准流中的位置放置元素。
如果position属性为relative，则可以打开元素的相对位置
如果元素设置为相对位置，则边缘偏移属性可以更改元素的位置，但会保留元素在文档流中的位置。
背景色： red；
width: 100px；
height: 100px；
}
. box2 {
背景色： green；
width: 100px；
height: 100px；
position: relative；
top: -50px；
left: 50px；
}
. box3 {
背景色：蓝色；
width: 100px；
height: 100px；
(}样式
div
div
div
实体
绝对位置(absolute ) ) )。
绝对放置的元素远离文档的流动，完全没有位置。
如果position属性为absolute，则可以打开元素的绝对位置。
如果元素处于绝对位置，则可以通过偏移边更改元素的位置。
父元素没有位置
如果未放置所有父元素，则将其放置在html根元素中。
父元素有位置
绝对位置根据最近位置的父元素进行放置。
断绝父亲的关系
通常，如果子元素是绝对位置，则父元素将放置在相对位置。
因为子元素是绝对放置的，不占用位置，可以放置在父盒的任何地方。 必须在布局父元素时占用位置。
背景色： red；
width: 100px；
height: 100px；
}
. box2 {
背景色： green；
width: 100px；
height: 100px；
位置： absolute；
top: 50px；
left: 150px；
}
. box3 {
背景色：蓝色；
width: 100px；
height: 100px；
(}样式
div
div
div
实体
定位固定(固定) ) ) ) ) )。
p>固定定位会脱离文档流，以浏览器窗口为参照物。
当position属性为fixed时可开启元素的固定定位。
background-color: red;
width: auto;
height: 800px;
}
.box3 {
background-color: blue;
width: auto;
height: 800px;
}
.box2 {
background-color: green;
width: 100px;
height: 100px;
position: fixed;
top: 100px;
}style>
div>
这里是固定定位div>
div>
body>
四种定位总结
定位模式
是否脱标占有位置
是否可以使用边偏移
移动位置基准
static
不脱标
不可以
正常模式
relative
不脱标，占有位置
可以
相对自身位置移动
absolute
完全脱标，不占有位置
可以
相对定位父级元素位置
fixed
完全脱标，不占有位置
可以
相对于浏览器位置
叠放次序(z-index)
当多个元素同时设置定位时，元素之间会出现重叠问题。
这时可以使用z-index属性，取值越大，层叠元素越剧上。
只有相对定位、绝对定位、固定定位有该属性，其他浮动、静态定位无此属性。
语法
选择器 {
z-index: 1;
}
居中布局
方式一
.box{
background-color: red;
width: 200px;
height: 200px;
margin: 0 auto;
}
方式二
.box{
background-color: red;
width: 200px;
height: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
方式三
.box{
background-color: red;
width: 200px;
height: 200px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}