老雷html/css开发视频教程之学习css的定位属性样式
老雷html/css教程之定位属性
一、position
position:static | relative | absolute | fixed
static 对象遵循常规流。此时4个定位偏移属性不会被应用。
relative 相对定位,存在占位,原来的元素位置不会变。
absolute 绝对定位,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。
fixed 固定定位,相对屏幕定位,不会随页面移动
.pos{
position:absolute;
}
二、z-index:1
层级显示 数字越大显示越前面
.zindex{
position:absolute;
z-index:100;
}
三、位置
top right bottom left (上 右 下 左)
值可以是具体像素或者百分比
.div{
top:10px;
right:10px;
bottom:10px;
left:10px;
}
课后练习
做一个对话确认弹框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>定位属性position</title> <style> .box1{ width:200px; height: 1200px; border: 1px solid #eee; } .box2{ width:200px; height: 60px; border: 1px solid #eee; position: relative; left:30px; top:30px; background-color: #0F8E82; } .box3{ position: fixed; left: 120px; width:100px; height: 100px; } </style> </head> <body> <div class="box1"> <div>顶部</div> <div class="box2">中间</div> <div class="box3">固定</div> <div>底部</div> </div> </body> </html>