目录
1.定位组成
定位也是在摆放盒子，按照定位的方式移动盒子
定位=定位模式+边偏移
定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置
定位模式
用关键词position来决定，static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)
边偏移
边偏移将定位的盒子移动到最终位置，有top 、bottom、 left、 right四个属性
静态定位static
静态定位时元素默认的定位方式，无定位的意思，相当于就是标准流
相对定位relative
相对定位时在移动卫视时，相对于它原来的位置来说的
相对于原来的位置进行移动，继续保留原来的位置，后面的盒子不会占有前面盒子原来的位置
绝对定位absolute
绝对定位是在元素移动位置时，相对于它祖先元素而言的
- 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
- 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有祖先定位的元素为参考点移动位置（注意是最近一级）
- 绝对定位不再占有原先的位置，后面的盒子会占据前面盒子移动前的位置
所写的边偏移是指距离参考对象的距离
如果爷爷级有定位而父亲级没有定位，那么就以爷爷级为参考对象；如果爷爷级和父亲级均有定位，那么以父亲级为参考对象
子绝父相
子级是绝对定位的话，父级需要用相对定位
- 子级绝对定位，不会占有位置，可以放到父级盒子里的任何一个地方，不会影响其他的兄弟盒子
- 父级盒子需要加定位来限制盒子在父级盒子里显示
- 父盒子布局时，需要占有位置，父盒子需要为相对定位（如果是绝对定位，后面的盒子会占据父级盒子的位置形成重叠）
父级需要占据位置，因此是相对位置，而子盒子不需要占有位置，是绝对定位
相对定位经常用来作为绝对定位的父级
固定定位
position:fixed;
以浏览器的可是窗口为参照点来移动元素，跟父元素没有任何关系，不随滚动条滚动
固定定位不占有原先的位置
让固定定位的盒子贴着版心右侧对齐：让固定的盒子left:50%,走到浏览器可视区的一半位置，再让固定的盒子margin-left:版心宽度的一半距离
粘性定位
position:sticky;top:10px;
以浏览器的可视窗口为参照点来移动元素，粘性定位保留原先的位置，必须添加top、 bottom 、left 、right中的一个才算有效
定位总结
定位叠放次序z-index
z-index:1;
- 数值可以是正整数、负整数或0，默认为auto，数值越大，盒子越靠上（数值大的会覆盖住数值小的）
- 入股属性相同，则按照书写顺序，后来居上
- 数字后面不能加单位
- 只有定位的盒子才能够有z-index属性
定位拓展
让绝对定位的盒子居中：先left:50%;让盒子的左侧移动到父级元素的水平中心位置，再margin-left:-100px;让盒子向左移动自身宽度的一半
绝对定位和固定定位与浮动类似：
行内元素添加绝对或固定定位，可以直接设置宽度和高度
块级元素添加绝对或固定定位，如果不给宽度和高度，默认大小是内容的多少
脱标的盒子不会触发外边距塌陷
浮动元素智慧压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字或图片
绝对定位（固定定位）会压住下面标准流所有的内容
2.网页布局总结
对于重复的内容可以用并集选择器，注意选择器的权重问题
3.元素的显示和隐藏
display隐藏
display:none;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不在占有原来的位置
visiblity可见性
visibility:visible;元素可视
visiblity:hidden;元素隐藏
visiblity隐藏元素后，继续占有原来的位置
overflow溢出
visible 不剪切内容也不添加滚动条
hidden 不显示超过对象尺寸的内容，超出部分隐藏掉
scroll 不管是否超出内容，总是显示滚动条
auto 超出盒子自动显示滚动条，不超出不显示滚动条
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
