一 固定定位
<!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>
css 固定定位
原文地址：https://www.cnblogs.com/lxx7/p/9687536.html