- relative会缩裹内容，不会脱离原来的流不会浮动，只是内容便宜，元素本身不偏移
- absolute会根据left等值撑开内容，会脱离原来的流浮动，但是不能通过清除浮动来消除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<!--position属性用来设置元素的位置，和android一样是以父元素右上角为原点，只有同时设置position和偏移值才会生效-->
<!--
1.absolute 相对于 static 定位以外的第一个父元素进行定位，否则相对于body进行定位，和浮动一样会脱离流，注意：不设置top等参数是不会脱离正常位置的。与浮动一样，会缩裹内容也就是需要设置宽度
2.fixed 不能设置根元素，根元素就是浏览器整个窗口
3.relative 相对于该元素正常位置进行偏移
4.static 默认值，无定位，出现在正常流中
-->
<div style="background-color: black;width: 400px;height: 400px;">
<div style="background-color: blue;width: 200px;height: 200px;"></div>
<div style="background-color: red;width: 200px;height: 200px;position: absolute;left: 0px;top: 0px"></div>
</div>
<br/>
<div style="background-color: black;width: 400px;height: 400px;position: relative;left: 50px;top: 50px">
<div style="background-color: blue;width: 200px;height: 200px;">
<div style="background-color: red;width: 100px;height: 100px;position: absolute;left: 0px;"></div>
</div>
</div>
<br/>
<!--fixed-->
<div style="background-color: black;width: 400px;height: 400px;position: relative;left: 50px;top: 50px">
<div style="background-color: blue;width: 200px;height: 200px;">
<div style="background-color: red;width: 100px;height: 100px;position: fixed;left:0px;right: 0px;z-index: 9999"></div>
</div>
</div>
<div style="background-color: red;width: 100px;height: 100px;position: fixed;top: 0px;left:0px;right: 0px;z-index: 9999"></div>
</body>
</html>
- 代替高度100%宽度100%，完美解决方案
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="width: 100%;height: 50px;background-color: black;position: absolute;top: 0px;left: 0px"></div>
<div style="width: 100%;height: 50px;background-color: black;position: absolute;bottom: 0px;left: 0px"></div>
<div style="width: 100%;background-color: red;position: absolute;top: 50px;bottom: 50px;left: 0px">
<div style="width: 200px;background-color:green;position: absolute;top: 0px;bottom: 0px;left: 0px;overflow-y: auto;">
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
</div>
<div style="width: 200px;background-color:blue;position: absolute;top: 0px;bottom: 0px;right: 0px">
B
</div>
<div style="position: absolute;left: 200px;right: 200px;top: 0px;bottom: 0px;background-color: gray">
C
</div>
</div>
</body>
</html>
-
结果
单飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div style="background-color: black;height: 50px;width: 100%;position: absolute;top: 0"></div>
<div style="background-color: gray;position: absolute;top: 50px;bottom: 0px;left: 0px;width: 100%">
<div style="background-color: red;position: absolute;top:0;bottom: 0px;left: 0px;width: 200px">
<div style="overflow-y: auto;height: 100%">
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
<h1>A</h1>
</div>
</div>
</div>
</body>
</html>
-
结果
网友评论