1. css定位机制
- 普通流:元素按照其在HTML的顺序位置决定排布的过程(上下流程或左右流程)
- 浮动
- 绝对定位:元素脱离文档流
2. css定位属性
属性 | 描述 |
---|---|
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 元素向上的偏移量 |
right | 元素向右的偏移量 |
bottom | 元素向上的偏移量 |
left | 元素向左的偏移量 |
overflow | 设置当元素内容溢出其区域发生的事情 |
clip | 设置元素显示的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素垂直对齐方式 |
z-index | 设置元素的堆叠顺序 |
positon的值:
- static :静态的
- relative:相对的
- absolute:绝对的
- fixed:固定的
(0) 普通流
position.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="position"></div>
<script>
for (var i=0; i<100; i++) {
document.write(i + "<br/>");
}
</script>
</body>
</html>
style_position.css
#position{
width: 100px;
height: 100px;
background-color: blue;
}
普通流.png
(1) 相对布局:
/*relative:不脱离文档流,会随页面滚动*/
#position{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 20px;
left: 20px;
}
相对布局.png
(2) 绝对布局:脱离文档流,会随页面滚动
/*absolute:脱离文档流,会随页面滚动*/
#position{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 20px;
left: 20px;
}
绝对布局.png
(3) 静态布局:
/*static:不脱离文档流,会随页面滚动。static和relative的区别在于,静态布局不支持上下左右偏移量和z-index堆叠设置*/
#position{
width: 100px;
height: 100px;
background-color: blue;
position: static;
}
静态布局.png
备注
:static和relative的区别在于,静态布局不支持上下左右偏移量和z-index堆叠设置。说明
:z-index的值无上限但尽量设置在100以内,值大的元素可覆盖值小的元素,更近地显示在用户面前。
(4) 固定布局:脱离文档流,不随页面滚动
/*fixed:脱离文档流,不随页面滚动*/
#position{
width: 100px;
height: 100px;
background-color: blue;
position: fixed;
top: 20px;
left: 20px;
}
固定布局.png
备注
:fixed和absolute的区别在于,固定布局元素始终会在屏幕的某个位置不动。
3. 其他属性-偏移量与堆叠顺序
(1) eg1
position.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<link href="style_position.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="position_1"></div>
<div id="position_2"></div>
<script>
for (var i=0; i<100; i++) {
document.write(i + "<br/>");
}
</script>
</body>
</html>
style_position.css
#position_1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 20px;
left: 20px;
}
#position_2{
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
top: 10px;
left: 10px;
}
效果1.png
(2) eg2
#position_1{
width: 100px;
height: 100px;
background-color: blue;
position: relative;
top: 20px;
left: 20px;
z-index: 2;
}
#position_2{
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
top: 10px;
left: 10px;
z-index: 1;
}
效果2.png
(3) eg3
#position_1{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
#position_2{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
效果3.png
(4) eg3
#position_1{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 20px;
left: 20px;
z-index: 3;
}
#position_2{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
}
#position_3{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 30px;
left: 30px;
z-index: 1;
}
效果4.png
网友评论