第七章 css定位

css定位
　　1.给元素添加position属性。让元素知道自己要做位置的变动
　　2.属性值确定参照物
　　3.指定固定的坐标
定位属性：
　　position属性:设置或检索元素定位方式
　　　　（如果元素有了position属性，元素就知道自己需要做位置的移动）
　　position的属性值：（属性值告诉元素参照物是谁)
　　指定坐标：left/right/top/bottom
position的属性值：
　　1.position:static; 静态定位 （默认值）
　　2.position:absolute; 绝对定位
　　　　a.绝对定位的参照物：
　　　　　　已经有定位的父元素；
　　　　　　如果父元素没有定位或没有父元素时，则以整个浏览器为参照物
　　　　b.绝对定位特点：
　　　　　　不占据空间，脱离文档流（布局）
　　　　　　注：绝对定位position:absolute;浮动无效 margin：0 auto;左右居中无效
　　3.position:relative; 相对定位
　　　　a.参照物是自身默认的位置。
　　　　b.特点：
　　　　　　占据空间。不破坏文档流（布局）
　　　　　　如果一个元素有相对定位，也支持margin：0 auto;和浮动

包含块的设置
　　1）给父元素添加position：relative; (让当前父元素形成参照物）
　　2）.给要做定位的元素添加position：absolute; （移动位置）

定位元素的层次关系：
　　默认情况下，结构里后写的元素添加定位，会把前写的元素盖住
　　控制定位元素的层次关系：
　　　　z-index: ;
　　　　　　属性值：一个数字。数字值越大越靠上层显示，能为负数。
　　　　　　默认值：auto
4.position:fixed; 固定定位
　　a:参照物：浏览器窗口
　　b:不占据空间，脱离文档流
让一个元素在浏览器窗口左右上下居中
　　way1:
　　　　position:fixed;
　　　　left:50%;
　　　　top:50%;
　　　　margin-left:-(元素宽度的一半);
　　　　margin-top：-(元素高度的一半);
　　缺点：元素无宽高时无法使用。
　　way2:
　　　　position:fixed;
　　　　left:0;
　　　　right:0;
　　　　top:0;
　　　　bottom:0;
　　　　margin:auto;
用定位实现子元素在父元素里居中：
　　父元素加：position-relative；
　　子元素加：position-absolute;
　　　　　　　　left:0;
　　　　　　　　right:0;
　　　　　　　　top:0;
　　　　　　　　bottom:0;
　　　　　　　　margin:auto;
5.position:sticky; 粘性定位
　　执行逻辑：
　　　　默认情况下：当浏览器窗口滚动条不滚动，当前元素没有超出浏览器窗口的时候执行：position：relative；如果当前元素超过当前窗口则用position：fixed；
　　　　粘性定位则综合了这两种情况。
　　导航栏吸顶效果：
　　　　position:sticky;
　　　　top:0;

网页布局：
　　首选：浮动＋盒模型
　　当元素产生层次关系，或为不规则布局，则使用定位。
脱离文档流：
　　position:absolute;
　　position:fixed;
　　注：如果块状元素没有设置宽度的时候，添加position:absolute;或position:fixed;出现宽度高度被撑开

　　banner图添加：
　　　　给父元素(版心)加：position:relative;
　　　　给图片加：
　　　　　　position:absolute;
　　　　　　left:50%;
　　　　　　margin-left:-图片宽度的一半

锚点：超链接的一种。让锚点绑定id名称的元素回到浏览器窗口的最顶端。
　　在同一个页面内实现不同位置的跳转。
<标签 id=“名称”></标签>
<a href="#名称 "></a>