<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位</title>
<style>
/*
一、定位：将盒子指定到页面的中的任意位置。
1.position 属性可以开启元素的定位
可选值：
static 没有开启定位（默认值）
relative 开启元素的相对定位
absolute 开启元素的绝对定位
fixed 开启元素的固定定位
sticky 开启元素的粘性定位
2.开启定位后通过 top right bottom left 四个属性设置元素的位置
二、绝对定位
1.绝对定位会脱离文档流
2.绝对定位会改变元素的显示模式，具有行内块元素的特点
3.绝对定位参照开启了定位的祖先元素进行定位的
4.如果没有祖先元素或者祖先元素没有开启定位，则以浏览器为参照进行定位
如果有开启了定位的祖先元素，则参照最近一级的祖先元素进行定位
*/
div{
width: 200px;
height: 200px;
}
.box1{
background-color: #c7edcc;
/*开启绝对定位*/
position: absolute;
/*移动元素的位置*/
left: 100px;
top: 100px;
}
.box2{
background-color: #fed6e0;
}
.father{
width: 300px;
height: 300px;
background-color: indianred;
margin-top: 100px;
margin-left: 200px;
/*开启定位*/
position: relative;
}
.bbdbb{
width: 500px;
height: 500px;
background-color: #dce2f1;
/*开启定位*/
position: relative;
}
</style>
</head>
<body>
<div class="bbdbb">
<div class="father">
<div class="box1">我是div</div>
</div>
</div>
<div class="box2"></div>
</body>
</html>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)