一、绝对定位
当元素的position属性值设置为absolute时,则开启了元素的绝对定位。
创建 HTML 页面,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
strong {
position: absolute;
}
</style>
</head>
<body>
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/juejin.png" alt="">
<div>我是div元素</div>
</body>
</html>
在浏览器中打开 HTML 页面,具体效果如下:
可以通过 left right top bottom 进行定位,定位的参照对象是最临近的定位
祖先元素,如果找不到这样的祖先元素,参照对象是视口。
定位元素
就是 position 不为 static 的元素,也就是 position 的值可以为 relative absolute fixed 元素。
strong 最临近的的祖先的定位元素就是 html,但是 html 不是一个定位元素。
添加如下 CSS 样式:
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
right: 0;
top: 0;
}
刷新页面,效果如下:
修改该 HTML 代码的结构如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 600px;
background-color: #00f;
}
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
/* right: 0;
top: 0; */
}
</style>
</head>
<body>
<div class="box">
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="">
<div>我是div元素</div>
</div>
</body>
</html>
刷新页面,效果如下:
设置 img 大小,具体代码如下:
img {
width: 100px;
height: 100px;
}
刷新页面,效果如下:
给 strong 元素设置偏移量,具体代码如下:
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
right: 0;
top: 0;
}
刷新页面,效果如下:
我们可以给 div 外面再嵌套一层,具体代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 1000px;
height: 800px;
background-color: #f00;
}
.box {
width: 800px;
height: 600px;
background-color: #00f;
}
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
right: 0;
top: 0;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/gouwujie01.jpg" alt="">
<div>我是div元素</div>
</div>
</div>
</body>
</html>
刷新页面,效果如下:
给新添加的 container 容器添加样式及定位信息,具体 CSS 代码如下:
.container {
width: 1000px;
height: 800px;
background-color: #f00;
position: fixed;
}
刷新页面,效果如下:
修改定位方式为 relative,具体代码如下:
.container {
width: 1000px;
height: 800px;
background-color: #f00;
position: relative;
}
再次刷新页面,效果如下:
给 box 设置相对定位:
.box {
width: 800px;
height: 600px;
background-color: #00f;
position: relative;
}
具体效果如下:
绝对定位的特点:
- 开启绝对定位后,如果不设置偏移量元素的位置不会发生变化。
- 开启绝对定位后,元素会从文档流中脱离。
- 绝对定位会改变元素的性质,行内变成块,块的宽高被内容撑开。
- 绝对定位会使元素提升一个层级。
- 绝对定位元素是相对于其包含块进行定位的。