一 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 80px;
}
.header{
width: 100%;
height: 80px;
background-color: red;
/*脱离了标准文档流*/
/*参考点：是以浏览器的左上角*/
position: fixed;
top:0;
left: 0;
z-index: 10000;
}
.active{
position: relative;
}
</style>
</head>
<body>
<div class="header"></div>
<p>beauty1</p>
<p>beauty2</p>
<p>beauty3</p>
<p>beauty4</p>
<p>beauty5</p>
<p>beauty6</p>
<p>beauty7</p>
<p>beauty8</p>
<p>beauty9</p>
<p>beauty10</p>
<p>beauty10</p>
<p>beauty10</p>
<p>beauty10</p>
<p>beauty10hulaquan</p>
<p>beauty10</p>
<p>beauty10</p>
</body>
</html>固定定位.再一次说下固定定位和相对定位相对定位的的特点:1,开启相对定位以后,如果不指定偏移量,元素位置不会发生变化2,相对定位的元素是相对于其自身在文档流中的位置进行定位3,相对定位的元素不会脱离文档里流4,相对定位的元素会使元素提升一个层级5,相对定位不会改变元素的性质,块还是块,内联元素还是内联元素
绝对定位的特点:1,绝对定位的元素会完全脱离文档流2,绝对定位的元素如果不设置偏移量,不会改变位置3,绝对定位会提升元素的层级4,一般与设置相对定位的父盒子一块使用, 子绝父相5,绝对定位会改变元素的性质,内联元素变成块元素,块元素变成内联元素
二 绝对定位的盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="content.css"> -->
<!-- <link rel="stylesheet" href="main.css"> -->
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: 0;
}
.father{
width: 100%;
height: 200px;
background-color: red;
position: relative;
}
.box{
width: 400px;
height: 100px;
background-color: green;
position: absolute;
/**/
left: 50%;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
</div>
</body>
</html>
三 z-index
<!DOCTYPE html> #遵从一句话,谁的值大,就显示谁的属性,但是双方若有父亲,则谁的父亲谁的值大,谁的厉害,如果#父亲不厉害,儿子再厉害也没有用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.father1{
width: 300px;
height: 300px;
background-color: red;
position:relative;
z-index: 3;
}
.child1{
width: 100px;
height: 100px;
background-color: purple;
position: absolute;
top: 280px;
left: 350px;
z-index: 20;
}
.father2{
width: 300px;
height: 300px;
background-color: green;
position:relative;
z-index: 2;
}
.child2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 0;
left: 350px;
z-index: 21;
}
</style>
</head>
<body>
<div class="father1">
<div class="child1"></div>
</div>
<div class="father2">
<div class="child2"></div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/lxx7/p/9687536.html
时间： 2024-08-28 05:23:06