IMOOC
IMOOC copied to clipboard
Published
20 hours ago •
CruxF
CruxF
CSS定位 position
前言
该篇博文是根据慕课网教程——《css定位position》整理而来，内容虽然简单基础，但是整理记录一下，帮助新手的同时也务实一下自己的基础知识。
HTML中三种布局方式
1、标准流：这是默认的布局方式。特点就是块级元素独占一行，意思就是两个块级或者多个块级元素不能在同一行显示，块级元素能设置宽高；内联元素能够在同一行显示，内联元素不能设置宽高。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div, p {
height: 50px;
line-height: 50px;
background-color: green;
}
span, a {
height: 50px;
line-height: 50px;
background-color: green;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是p</p>
<span>我是span</span>
<a>我是a</a>
</body>
</html>
2、position定位属性
- static：默认值，没有定位特性，元素出现在正常的流中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
height: 50px;
width: 200px;
line-height: 50px;
background-color: green;
position: static;
left: 20px;
top: 20px;
}
</style>
</head>
<body>
<div>我是div</div>
</body>
</html>
- relative：相对定位，相对于自身正常的位置进行定位，不脱离文档流。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
height: 50px;
width: 200px;
line-height: 50px;
background-color: green;
}
p {
position: relative;
top: 0;
left: 15px;
height: 50px;
width: 500px;
line-height: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是相对定位的p元素，根据自身所在的位置进行定位</p>
</body>
</html>
- absolute：绝对定位，相对于static定位以外的第一个父元素进行定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
height: 500px;
width: 800px;
line-height: 500px;
background-color: green;
margin-left: 55px;
}
p {
position: absolute;
top: 0px;
left: 55px;
height: 50px;
width: 500px;
line-height: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div>
<p>我是绝对定位的p元素，定位规则较复杂</p>
</div>
</body>
</html>
当我们把父元素设置为相对定位或者绝对定位的时候，那么内部绝对定位的子元素就会根据父元素进行定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
height: 500px;
width: 800px;
line-height: 500px;
background-color: green;
margin-left: 55px;
position: relative;
}
p {
position: absolute;
top: 0px;
left: 55px;
height: 50px;
width: 500px;
line-height: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div>
<p>我是绝对定位的p元素，定位规则较复杂</p>
</div>
</body>
</html>
- inherit：从父元素中继承position的属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div {
height: 500px;
width: 800px;
line-height: 500px;
background-color: green;
margin-left: 55px;
position: relative;
}
p {
position: inherit;
top: 0px;
left: 55px;
height: 50px;
width: 500px;
line-height: 50px;
background-color: brown;
}
</style>
</head>
<body>
<div>
<p>我是继承父元素相对定位的p元素</p>
</div>
</body>
</html>
- fixed：固定定位，相对于浏览器窗口定位。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100%;
height: 3000px;
border: 1px solid brown;
}
p {
height: 50px;
width: 500px;
line-height: 50px;
text-align: center;
background-color: green;
color: #fff;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p>我是固定定位元素，相对于浏览器窗口进行定位</p>
</div>
</body>
</html>
z-index详解
- 一般情况下，两个position属性值为relative或absolute或fixed的元素发生重叠，那么在文档流中后面的元素会覆盖掉前面的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
position: fixed;
left: 33px;
top: 55px;
}
p {
width: 200px;
height: 200px;
background-color: green;
position: fixed;
left: 155px;
top: 200px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是p</p>
</body>
</html>
- 我们能够使用z-index属性改变元素之间的堆叠顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
position: fixed;
left: 33px;
top: 55px;
z-index: 1;
}
p {
width: 200px;
height: 200px;
background-color: green;
position: fixed;
left: 155px;
top: 200px;
}
</style>
</head>
<body>
<div>我是div</div>
<p>我是p</p>
</body>
</html>
- 父元素遮盖子元素的实现只能在子元素上动手脚，修改父元素的z-index值不会有任何的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 500px;
height: 500px;
background-color: red;
}
p {
width: 200px;
height: 200px;
background-color: green;
position: relative;
z-index: -5;
}
h1 {
width: 100px;
height: 100px;
background-color: black;
position: absolute;
top: 130px;
left: 150px;
z-index: -5;
}
</style>
</head>
<body>
<div>
<p>我是p</p>
<h1></h1>
</div>
</body>
</html>
- 子元素具有拼爹的特点，可以试一试修改的parent1和parent2的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.parent1 {
height: 500px;
width: 500px;
background-color: red;
position: relative;
z-index: 10;
}
.child1 {
height: 300px;
width: 300px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.parent2 {
height: 400px;
width: 400px;
background-color: blueviolet;
position: absolute;
left: 50px;
top: 50px;
z-index: 5;
}
.child2 {
height: 200px;
width: 200px;
background-color: teal;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent1">
<div class="child1">child1</div>
</div>
<div class="parent2">
<div class="child2">child2</div>
</div>
</body>
</html>
