CSS定位详解

慢吞云雾缓吐愁 · 3 天前

1. 相对定位

1.1 如何设置相对定位？ 给元素设置 position:relative 即可实现相对定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。 1.2 相对定位的参考点在那里？ 相对自己原来的位置 1.3 相对定位的特点： 1. 不会离开文档流，元素位置的厘革，只是视觉效果上的厘革，不会对其他元素产生任何影响。 2. 定位元素的表现层级比普通元素高，无论什么定位，表现层级都是一样的。 默认规则是： 定位的元素会盖在普通元素之上。都发生定位的两个元素，后写的元素会盖在先写的元素之上。 3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。 4. 相对定位的元素，也能继续浮动，但不推荐这样做。 5. 相对活动的元素，也能通过 margin 调整位置，但不推荐这样做。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01_相对定位</title>
<style>
.outer{
width: 500px;
background-color: aquamarine;
border: 1px solid black;
padding: 20px;
}
.box{
width: 100px;
height: 100px;
font-size: 20px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
position: relative;
left: 10px;
}
.box3 {
background-color: hotpink;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>

复制代码

留意：绝大多数环境下，相对定位，会与绝对定位共同使用。
2. 绝对定位

2.1 如何设置绝对定位？ 给元素设置 position: absolute 即可实现绝对定位。可以使用 left 、 right 、 top 、 bottom 四个属性调整位置。 绝对定位的参考点是参考它的 包罗块 。
什么是包罗块？ 1. 对于没有离开文档流的元素：包罗块就是父元素； 2. 对于离开文档流的元素：包罗块是第一个拥有定位属性的先人元素（如果全部先人都 没定位，那包罗块就是整个页面）

口诀：子绝父相(子元素开启绝对定位，父元素就要开启相对定位)

鼠标浮动在父元素上，盒子2向右移动200px

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_绝对定位</title>
<style>
.outer {
width: 500px;
background-color: aquamarine;
border: 1px solid black;
padding: 20px;
position: relative;
}
.box {
width: 100px;
height: 100px;
font-size: 20px;
}
.box1 {
background-color: red;
}
.box2 {
background-color: green;
/* 给2开启了绝对定位，他就脱离了文档流 3就占领了2的位置 */
position: absolute;
}
.box3 {
background-color: hotpink;
}
.outer:hover .box2{
right: 200px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

CSS定位详解

0 个回复

快速回复

楼主热帖

标签云