CSS04——定位布局
定位布局
静态定位(Static positioning)
是所有元素的默认定位方式。意味着经一个元素定位在默认文档流中。
position:static;
相对定位(Relative position)
相对定位就是相对于自己以前在标准流中的位置来移动
position:relative;
使用top，right，bottom，left来控制
例如：
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.div1,.div2,.div3{
width: 200px;
height: 200px;
}
.div1{
background-color: pink;
}
.div2{
background-color: skyblue;
position: relative;
top: 40px;
left: 40px;
}
.div3{
background-color: yellow;
}
</style>
注意点：
1、相对定位是相对自身在浏览器中的默认位置，不脱离文档流
2、同一方向的属性只能用一个
3、因为不脱离文档流，所以相对定位中是区分块级元素/行内元素/行内块元素
4、给相对定位的元素设置margin/padding等属性时也影响到标准流的布局。
相对定位的应用场景：
1、用于对元素进行微调
2、配合绝对定位使用（子绝父相）
绝对定位
绝对定位是相对于body来定位
例如：
<body>
<div class="div1"></div>
<div class="div2">
<div class="div4"></div>
</div>
<div class="div3"></div>
</body>
<style>
*{
margin: 0;
padding: 0;
}
.div1,.div2,.div3{
width: 100px;
height: 100px;
}
.div1{
background-color: pink;
}
.div2{
background-color: skyblue;
position: relative;
}
.div3{
background-color: yellow;
}
.div4{
width: 50px;
height: 50px;
background-color: plum;
position: absolute;
top: 40px;
}
</style>
/* 绝对定位
特性：
1、脱离文档流 原先位置不保留
2、默认使用了绝对定位元素 无论有没有父元素
参照点是body浏览器视口区域
3、如果祖先元素使用了定位属性
则相对于祖先元素定位
*/
注意点：
1、脱离文档流，原先位置不保留区
2、默认使用了绝对定位元素，无论有没有父元素，参照点都是body的视口区域
3、如果祖先元素使用了定位属性，则相对于祖先元素定位
子绝父相
相对定位弊端:
相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
绝对定位弊端:
默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
子绝父相
子元素用绝对定位, 父元素用相对定位
固定定位
固定定位可以让某个盒子不随着滚动条的滚动而滚动
position: fixed;
例如：
<body>
<div>第1个标签</div>
<div>第2个标签</div>
<div>第3个标签</div>
<div>第4个标签</div>
<div>第5个标签</div>
<div>第6个标签</div>
<div>第7个标签</div>
<div>第8个标签</div>
<div>第9个标签</div>
<div>第10个标签</div>
<div>第11个标签</div>
<div>第12个标签</div>
<div>第13个标签</div>
<div>第14个标签</div>
<div>第15个标签</div>
<div>第16个标签</div>
<div>第17个标签</div>
<div>第18个标签</div>
<div>第19个标签</div>
<div>第20个标签</div>
<div>第21个标签</div>
<div>第22个标签</div>
<div>第23个标签</div>
<div>第24个标签</div>
<div>第25个标签</div>
<div>第26个标签</div>
<div>第27个标签</div>
<div>第28个标签</div>
<div>第29个标签</div>
<div>第30个标签</div>
<div>第31个标签</div>
<div>第32个标签</div>
<div>第33个标签</div>
<div>第34个标签</div>
<div>第35个标签</div>
<div>第36个标签</div>
<div>第37个标签</div>
<div>第38个标签</div>
<div>第39个标签</div>
<div>第40个标签</div>
<div>第41个标签</div>
<div>第42个标签</div>
<div>第43个标签</div>
<div>第44个标签</div>
<div>第45个标签</div>
<div>第46个标签</div>
<div>第47个标签</div>
<div>第48个标签</div>
<div>第49个标签</div>
<div>第50个标签</div>
<div>第51个标签</div>
<div>第52个标签</div>
<div>第53个标签</div>
<div>第54个标签</div>
<div>第55个标签</div>
<div>第56个标签</div>
<div>第57个标签</div>
<div>第58个标签</div>
<div>第59个标签</div>
<div>第60个标签</div>
<div>第61个标签</div>
<div>第62个标签</div>
<div>第63个标签</div>
<div>第64个标签</div>
<div>第65个标签</div>
<div>第66个标签</div>
<div>第67个标签</div>
<div>第68个标签</div>
<div>第69个标签</div>
<div>第70个标签</div>
<div>第71个标签</div>
<div>第72个标签</div>
<div>第73个标签</div>
<div>第74个标签</div>
<div>第75个标签</div>
<div>第76个标签</div>
<div>第77个标签</div>
<div>第78个标签</div>
<div>第79个标签</div>
<div>第80个标签</div>
<div>第81个标签</div>
<div>第82个标签</div>
<div>第83个标签</div>
<div>第84个标签</div>
<div>第85个标签</div>
<div>第86个标签</div>
<div>第87个标签</div>
<div>第88个标签</div>
<div>第89个标签</div>
<div>第90个标签</div>
<div>第91个标签</div>
<div>第92个标签</div>
<div>第93个标签</div>
<div>第94个标签</div>
<div>第95个标签</div>
<div>第96个标签</div>
<div>第97个标签</div>
<div>第98个标签</div>
<div>第99个标签</div>
<div>第100个标签</div>
<div class="divBot"><a href="#">回到顶部</a></div>
</body>
<style>
.divBot{
width: 100px;
height: 100px;
background-color: yellow;
position: fixed;
top: 20px;
right: 0px;
}
</style>
注意：
1、固定定位的元素是脱离标准流的，不会占用标准中的空间
2、相对于浏览器的视口区域移动
粘滞定位
结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位。
position: sticky;
例如：
<body>
<div class="container">
<div></div>
<div></div>
<!-- 设置两个侧边栏 -->
<aside class="right"></aside>
<aside class="left"></aside>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
<style>
.container{
width: 1200px;
margin: 0 auto;
}
.container>div{
height: 700px;
}
.container>div:nth-child(odd){
background-color: white;
}
.container>div:nth-child(even){
background-color: rgb(236, 194, 236);
}
/* 设置左侧侧边栏的样式 */
.left{
width: 100px;
height: 500px;
margin-left: 10px;
background-color: skyblue;
/* 设置粘滞定位 */
position: sticky;
top: 50px;
}
/* 设置右侧侧边栏 */
.right{
width: 100px;
height: 500px;
float: right;
background-color: pink;
position: sticky;
top: 50px;
}
</style>
注意：
1、不脱离文档流 原先位置保留
2、设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可
使用条件：
1、父元素不能overflow:hidden或者overflow:auto属性。
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
4、sticky元素仅在其父元素内生效
水平垂直居中
例如：
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
第一种
.parent{
width: 200px;
height: 200px;
background-color: skyblue;
/* 1、水平垂直居中 通过给父元素设置边框*/
border: 1px solid skyblue;
}
.child{
width: 100px;
height: 100px;
background-color: pink;
/* 1.2、设置margin上下左右为宽高的各一半 */
margin: 50px;
}
第二种
.parent{
width: 200px;
height: 200px;
background-color: skyblue;
/* 2 、水平垂直居中 通过父元素挤压padding*/
padding: 50px;
/* 2.2、设置边框盒模型 */
box-sizing: border-box;
}
.child{
width: 100px;
height: 100px;
background-color: pink;
}
第三种：
.parent{
width: 200px;
height: 200px;
background-color: skyblue;
/* 3、给父元素设置相对定位 */
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: pink;
/* 3.2 子元素设置绝对定位
配合属性全部为0 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
第四种：
.parent{
width: 200px;
height: 200px;
background-color: skyblue;
/* 4、父元素相对定位 */
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: pink；
/* 4.2、给子元素绝对定位 */
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
