老雷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>