定位
定位简介
定位:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
- 流定位
- 浮动定位
- 相对定位
- 绝对定位
- 固定定位
- 粘性定位
流定位
页面中的块级元素框从上到下一个接一个地排列
- 每一个块级元素都会出现在一个新行中(比如p元素、div元素)
- 元素框之间的垂直距离是由框的垂直外边距计算出来的
行内元素将在一行中从左到右排列水平布置
- 不需要从新行开始
- 可以使用水平内边距、边框和外边距调整它们的间距
浮动定位
浮动定位是:
- 让元素脱离普通的流定位
- 将浮动元素放置在父元素的左边或者右边
- 浮动元素依旧位于父元素之内
浮动的框可以向左或向右移动,直到它的外边缘碰到父元素或另一个浮动框的边框为止
- 经常使用它来实现特殊的定位效果
浮动定位示例一:
父元素中有三个元素框d1、d2、d3,如果把d1元素框向右浮动,则它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outer{
border: 1px solid red;
width: 400px;
height: 400px;
}
.inner{
border: 1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class=outer>
<div class="inner" id="d1">d1</div>
<div class="inner" id="d2">d2</div>
<div class="inner" id="d3">d3</div>
<p>浮动定位时,观察我的位置</p>
</div>
</body>
</html>
在浏览器运行该HTML代码,效果如下:
加入以下的代码至style标签中,将d1元素框向右浮动:
#d1{
float:right;
}
效果如下图,可以看到d1元素框浮动到父元素框内的最右边,并且观察到p标签内的文本向上移动了。
浮动定位示例二:
当元素框d1向左浮动时,它脱离流定位并且向左移动,直到它的左边缘碰到父元素的左边缘
因为元素框d1不再处于流定位中,所以它不占据空间,实际上盖住了框d2,使框d2从视图中消失
将框d1的部分css代码修改成如下:
<style>
.d1{
float: left;
}
</style>
效果如下图:
可以观察到框d1覆盖了框d2,但是文字d2缺跑到了框d3的位置,所以造成了d2,d3文字重叠的效果。
浮动定位小结:
如果需要设置框浮动在父元素的左边或者右边,可以通过float属性来实现
- float属性定义元素在哪个方向浮动
- 在CSS中,任何元素都可以浮动
- float: none/left/right;
清除浮动定位
- clear属性用来清除浮动所带来的影响
- clear: none/ left/ right/ both
- 定义了元素的哪边上不允许出现浮动元素
清除浮动定位的效果
代码修改如下:
#d1,#d2,#d3{
float:left;
}
效果如下:
若是给要给p清除浮动,插入代码:
p{
clear:left;
}
效果如下:
相对定位
- 元素原本所占的空间不释放
- 元素框会相对于它原来的位置偏移某个距离
- 设置垂直或者水平位置,让元素相对于它的起点进行移动
设置元素为相对定位
- 首先需要设置position,属性的值为relative
- 然后使用left或right属性设置水平方向的偏移
- 或者设置top或bottom属性设置垂直方向的偏移量
相对定位示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
border: 1px solid red;
width: 100px;
height: 100px;
position: relative;
left: 100px;
top: 50px;
}
</style>
</head>
<body>
<h1>相对定位</h1>
<div>d1</div>
</body>
</html>
效果如下:
绝对定位
将元素的内容从当前定位中移出,释放空间
并使用偏移属性来固定该元素的位置
- 相对于最近的已定位的祖先元素
- 如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块,如body元素
设置元素为绝对定位
- 首先需要设置position属性值为absolute
- 然后使用left或right属性设置水平方向的偏移
- 或者设置top或bottom属性设置垂直方向的偏移量
绝对定位示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.outter{
border: 1px solid blue;
width: 300px;
height: 300px;
position: relative;
}
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<div class="outter">
<h1>绝对定位</h1>
<div class="d1">d1</div>
</div>
</body>
</html>
效果如下:
固定定位
将元素的内容固定在页面的某个位置
- 元素从普通流中完全移除,不占用页面空间
- 当用户向下滚动页面时元素框并不随着移动
设置固定定位 - 首先需要设置position属性的值为fixed
- 通过left, top, right, bottom这些偏移属性来定义元素的位置
固定定位示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.return{
width: 60px;
height: 30px;
line-height: 30px;
background-color: #ccc;
text-align: center;
position: fixed;
right: 10px;
bottom: 30px;
}
.main{
border: 1px solid red;
width: 400px;
height: 500px;
}
.return>a {
text-decoration: none;
}
</style>
</head>
<body>
<h1>固定定位</h1>
<p>移动页面,观察右下角按钮位置,点击按钮可以回到页面顶部</p>
<div class="main">d1</div>
<div class="main">d2</div>
<div class="main">d3</div>
<div class="return">
<a href="#">顶部</a>
</div>
</body>
</html>
具体效果自已自行尝试,这里就不放图片了
粘性定位
粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换
可以在这个网站尝试:https://www.runoob.com/css/css-positioning.html#position-static
堆叠顺序
一旦修改了元素的定位方式,则元素可能会发生堆叠
可以使用z-index属性来控制元素框出现的重叠顺序
z-index属性
- 属性值为数值,数值越大表示堆叠顺序更高,即离用户更近
- 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,也就是数值越大的在上层
- 改属性值可以是负数,表示离用户更远
更改堆叠顺序示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
img {
position: absolute;
}
#img1 {
left: 100px;
top: 100px;
}
#img2 {
left: 200px;
top: 200px;
}
#img3 {
left: 300px;
top: 100px;
}
img:hover {
z-index: 999;
}
</style>
</head>
<body>
<div>
<img src="../01.jpg" id="img1"/>
<img src="../02.jpg" id="img2"/>
<img src="../03.jpg" id="img3"/>
</div>
</body>
</html>
在同目录下添加三张图片,修改图片命名与代码内的一致。当鼠标悬停在某张图上时,该图在页面最前端,效果如下:(该图中鼠标悬停在最右的图片上)
定位属性总结
属性 | 说明 |
---|---|
position | 规定元素的定位类型,可取值:static/relative/absolute/fixed |
偏移属性 | top, bottom, left, right属性,用于定义元素框的偏移位置 |
z-index | 设置元素的堆叠顺序 |
float/clear | 浮动定位属性 |
- 使用position属性和偏移属性实现流定位、相对定位、绝对定位和固定定位
- 使用float属性实现浮动定位
- 其他属性为辅助属性