CSS定位(改变元素在页面上的位置)
2019-09-23 本文已影响0人
瑟闻风倾
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
