CSS 定位
2018-12-10 本文已影响13人
roy_pub
元素的定位属性
元素定位属性
- 定位模式
- 边偏移
边偏移
| 边偏移属性 | 说明 |
|---|---|
| top | 顶端偏移量，定义元素相对于父元素上边线的距离 |
| bottom | 底部偏移量，定义元素相对于父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于父元素左边线的距离 |
| right | 右侧偏移量，定义元素相对于父元素右边线的距离 |
定位模式
在 CSS 中，position 属性用于定义元素的定位模式，基本语法如下：
选择器 {position: 属性值;}
静态定位是相对于所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态定位就是各个元素在HTML文档流中默认位置。网页中所有元素都默认使用静态定位，其实就是标准流的特性。
在静态定位模式下，无法通过边偏移属性改变元素位置。
| 值 | 描述 |
|---|---|
| static | 自动模式，默认定位方式 |
| relative | 相对定位，相对于其原文档流的位置进行定位 |
| absolute | 绝对定位，相对于其一个已经定位的父元素进行定位 |
| fixed | 固定定位，相对于浏览器窗口进行定位 |
相对定位
- 相对定位移动的位置，是以自己的左上角为基点移动，相对于自己来移动位置
- 相对定位通过边偏移移动位置，但是原来所占的位置，继续占有
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
margin: 20px;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
}
.top {
background-color: green;
position: relative;
left: 50px;
top: 50px;
}
.bottom {
background-color: red;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
绝对定位
- 若所有父元素都没有定位，以浏览器屏幕为准对齐
- 若父元素有定位，依据最近已经定位的父元素进行定位
- 绝对定位不占用位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background-color: green;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
}
.top {
background-color: green;
position: absolute;
bottom: 0;
right: 0px
}
.bottom {
background-color: red;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="bottom"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: green;
margin: 100px;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: green;
margin: 100px;
position: absolute;
}
.son {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
固定定位
固定定位是绝对定位的一种特殊形式，以浏览器窗口作为参照物来定义网页元素。
当元素设置为固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口大小如何变化，该元素始终显示在浏览器窗口固定位置。
- 固定定位只认浏览器，和父元素没有任何关系
- 固定定位完全脱标，不占有位置，不随滚动条滚动。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
height: 3000px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
position: fixed;
right: 0;
top: 100px;
}
</style>
</head>
<body>
<div>adv</div>
</body>
</html>
子绝父相
子级是绝对定位，父级要用相对定位
如图选中区域所示，定位应该使用绝对定位，因为静态和相对定位会占用位置，影响布局。绝对定位不占用位置，不影响下层布局。
父元素如果没有定位，所选区域定位位置会相对屏幕定位，所以父元素需要添加定位。
如果父元素使用绝对定位，会影响父元素外的布局。
所以子绝父相是经常使用的一种组合。
使用场景
定位小Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 310px;
height: 190px;
border: 1px solid lightgray;
padding: 10px;
margin: 10px auto;
position: relative;
}
.top {
position: absolute;
top: 0;
left: 0;
}
.bottom {
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div>
<img src="images/top_tu.gif" height="54" width="60" class="top"/>
<img src="images/br.gif" height="54" width="60" class="bottom"/>
<img src="images/adv.jpg" height="190" width="310"/>
</div>
</body>
</html>
