二十,CSS定位概述与相对定位
2020-12-23 本文已影响0人
好多可乐
CSS定位:
position:relative(相对)/absolute(绝对)/ static(无定位)/ fixed(固定)
文档流:从上往下,从左到右
相对定位:
relative:相对于自己以前所在的位置进行定位,效果如下图(本来在左上角,设置相对定位和top,left属性后,红色方块进行了移动)
如果设置了相对定位以后,不输入具体的top/left值,这样相对定位可以做为一种容器父元素存在。
<html>
<head>
<style type="text/css">
.main{
background-color: yellow;
}
.div1{
height: 100px;
width: 100px;
position: relative;
top: 10px;
left: 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="main">