CSS定位和浮动（吸顶居中）
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS定位和浮动（吸顶居中）相关的知识，希望对你有一定的参考价值。
理论知识：
场景一：
1、把要移动的元素拿来
2、放到哪个容器里面（参照物）
3、放到当前容器的具体位置（坐标）
场景二：
1、自身要脱离当前位置
2、坐在教室（参考物）
3、东南角（第几排）（坐标）
包含块（绝对定位的参考物）的设置方式：
给要做绝对定位的父元素（参考物），添加position：relative让其形成参考物
定位属性：position 设置或者检索元素的定位方式
属性值：
1、position：static（静态定位，默认值）2、position：absolute（绝对定位）
a、若没有父元素，参考物为整个html文档
b、默认情况下参考物为已经做定位的父元素
c、添加绝对定位元素，会脱离整个布局流，不占据空间，破坏布局空间。
3、position：relative（相对定位）
a、参照物为自身的默认位置
b、占据空间
c、不会破坏布局流4、position：fixed（固定定位）
参照物为浏览器窗口拓展:
5、position：sticky（粘性定位）
特点：
position：relative和position：fixed的结合
当没触发滚动条的时候，执行的效果是position：relative；反而执行效果是position： fixed；
定位元素的层次关系：
z-index：数值
数值越大层次关系越给上层显示 （支持负数）定位属性：position 设置或者检索元素的定位方式
居中显示代码：
让一个元素在浏览器窗口左右上下居中：
1、position：fixed；
left：50%；
top：50%；
margin-left：-150px；
margin-top：-110px；2、position：fixed；
left：0；right：0；
bottom：0；top：0；
margin：auto；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 220px;
background: orange;
position:fixed;
left: 50%;
top: 50%;
margin-top: -110px;
margin-left: -150px;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
关于粘性定位的小列子：（吸顶效果）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.topWarp{
height: 80px;
background: red;
}
.nav{
width: 1000px;
height: 60px;
background: #000;
margin: 0 auto;
position: sticky;
top: 0;
}
.content{
height: 1500px;
background: #ccc;
}
</style>
</head>
<body>
<div class="topWarp">
</div>
<div class="nav">
</div>
<div class="content">
</div>
</body>
</html>
浮动：float：left、right、none
1、浮动不占据空间
2、如果多个元素横向排列，这些元素都要添加浮动
3、如果天剑浮动的子元素总宽超过父元素，最后一个元素会被挤下来
4、只要子元素有浮动，父元素一定要添加高度，否则会出现高度塌陷
注意：margin-（left、right、top、bottom）和left、right、top、bottom的区别？
1.直接在css中设置left、right、top、bottom生效的前提是必须设置父容器position:absolute或relative，如果不设置则会显示为最近一个定位的父对象相关的位置
2.设置margin-（left、right、top、bottom）则只会出现在父对象的相对位置，不考虑是否设置了position。
以上是关于CSS定位和浮动（吸顶居中）的主要内容，如果未能解决你的问题，请参考以下文章
web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）
web前端练习30----Css，布局（文档流，浮动，清除浮动，浮动高度塌陷，垂直外边距重叠问题，定位，层级，居中，flex布局及练习）
Web前端技术：CSS部分深入---盒子模式，overflow属性,border属性,内外边距,水平居中问题，块行内元素,浮动，层定位