CSS定位

定位

为什么需要定位？

定位应用场景：

1. 盒子自由的在某个盒子内移动，并且可以压住其他盒子（而不是浮动那种只能左右 不能压住）
2. 固定在屏幕中的某个位置

定位组成

定位

：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

定位= 定位模式 + 边偏移

1. 定位模式

   用于指定一个元素在文档中的定位方式。

2. 边偏移

   则决定了该元素的最终位置。

定位模式

边偏移

定位的盒子移动到最终位置。有top,bottom,left,right等4个属性。

静态定位static（了解）

默认定位方式，＝无定位。

相对定位relative（重要）

相对定位后，不会像浮动一样影响它后面的盒子。保留他自己的位置

注意盒子的移动方向：

• 以左上角的点为原点，x轴向右数为正，y轴向下数为正
  • 此时，top=0，left=0
  • 添加偏移量，就是盒子哪一边对应的坐标轴值是多少。
• right参数以右上角的点为原点进行浸塑

相对定位没有脱标。最典型的应用是给绝对定位当爹。

绝对定位absolute（重要）

**绝对定位**

是元素在移动位置的时候，是相对于它祖先元素来说的。（拼爹型）

绝对定位的特点（务必记住）

1. 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document)

   祖先元素没有定位：标准流或浮动

2. 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位的祖先元素为参考点移动位置。

   • 给父亲加定位就可以让绝对定位在父盒子当中

   • 如果爸爸没有定位，爷爷有定位，则这个盒子以爷爷为参考点进行偏移。

     一直向上找，直到找到最近的有定位的盒子。如果都没有，就以浏览器为准。

3. 绝对定位不再占有原来盒子的位置（脱离标准流）

子绝父相的由来

问题

• 什么时候用相对什么时候用绝对？

• 为什么说相对定位给绝对定位当爹？

子绝父相

：子级使用绝对定位，父级则需要相对定位。

1. 自己绝对定位，不会占有位置，可以放到父盒子里面的任意一个地方，不会影响其他的兄弟盒子
2. 父盒子需要添加定位限制子盒子在父盒子内显示
3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位

总结

因为父级需要占有位置，因此是相对定位。子盒子不需要占有位置，所以是绝对定位

。

固定定位

固定定位是元素固定于浏览器**可视区**的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

可视窗口会随着页面的缩小、放大而改变，就是你现在能看到的那些。

ps:网页中的图片很多，最好给每个图片添加一个盒子。使用盒子控制图片。

固定定位小技巧

固定定位的盒子还可以和版心对齐，固定在相对版心的某个位置，常见固定在版心的右侧。

小算法：

1. 固定定位的盒子left:50%，到浏览器可视区一半位置
2. 固定定位的盒子margin-left:版心宽度一半距离，多走版心宽度的一般

就可以让固定定位的和盒子贴在版心右侧对齐。

如果是在版心左侧对齐，可以同理使用right进行操作。

粘性定位sticky（了解）

**粘性定位**

可以被认为是相对定位和固定定位的组合。

相对定位：相对自身位置发生改变，不脱标。

固定定位：不随着滚动而改变

应用场景：导航栏

使用效果：一开始随着页面滚动，到达设定的相对于可视区浏览器的位置后，就变成固定定位的效果，不再发生滚动。

兼容性差，IE不支持

定位总结

定位叠放次序

定位布局中，可以使用z-index来控制盒子的上下次序(z轴)。

数值越大，盒子所在的位置越高。

注意

• 数字后面不能添加单位
• 只有定位的盒子才能有z-index属性

定位拓展

1. 绝对定位盒子居中

   • 加了绝对定位的盒子不能通过magin:0 auto在父盒子中水平居中。

   • 算法

     水平居中

     • left：50%（其实是走父容器宽度的一半）
     • margin-left:负自身宽度的一半（这里没法写百分号，需要自己计算）

     垂直居中

     • top:50%
     • margin-top:负自身宽度的一半

2. 固定盒子同绝对盒子的方法一样，因为固定盒子是特殊的绝对盒子。

3. 定位的特殊性

   绝对定位与固定定位也和浮动类似。

   • 行内元素添加绝对或固定定位，可以直接设置高度和宽度

   • 块级元素添加绝对或固定定位，如果不设置宽度和高度，默认大小是内容大小，即文字或图片的大小

   • 脱标的盒子不会触发*外边距塌陷问题

     浮动元素、绝对定位（固定定位）的元素都不会触发外边距合并的问题

4. 文档流遮盖情况

   • 浮动元素只会压住标准流下面的盒子，不会压住下面盒子里的内容（文字或图片）

     浮动压不住文字，原因是

     浮动产生的目的就是，制作文字缠绕效果的图片(给图片添加浮动即可)

     后面就用浮动来制作布局。

   • 绝对定位会压住盒子的全部内容，包括盒子和盒子里面的内容（文字或图片）

案例：淘宝焦点(轮播)图

【注意】

• 添加了定位的行内标签，不需要转换标签类型，即可设置宽度和高度。

  案例中左右的箭头，是a标签内的\&lt；符号。设置了a盒子的大小添加了背景色，添加定位后的高度和宽度即可生效。

• 

  该符号只修改了右侧的两个radius

  border-top-right-radius: 高度一半px;
  border-bottom-right-radius: 高度一半px;
  

• 左侧按钮和右侧按钮有很多相同的属性

  使用并集选择器，节省代码将近一半的容量。

  细节注意，只要属性名字不同，就不是冲突，不发生重叠。

  如在并计算选择器中，两个按钮都设置了left:0；

  在再next选择器中，设计right=0,此时该按钮也不会到右边。样式未发生冲突

  如有一个盒子既有left属性也有right属性，则默认会执行left属性。同理，top和bottom会执行top

网页布局总结

通过盒子模型，知道大部分html标签是一个盒子。（结构）

通过css浮动、定位，可以让每个盒子排列成网页。(表现)

一个完整的网页，是标准流、浮动、定位一起完成布局，每个都有自己专门的用法。

1. 标准流

   可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局

2. 浮动

   可以让多个块级元素左右布局对齐（中间可以没有间隙),多个块级盒子水平显示就用浮动布局

3. 定位

   定位最大的特点就是有层叠概念，可以让多个盒子前后叠压来显示。如果元素**自由**在某个盒子内移动就用定位布局

元素的显示与隐藏

类似网页中的广告，鼠标点击后就消失不见了，再次刷新后会重新出现。

鼠标经过，就显示下拉菜单，不在就会消失。

本质：让一个元素在页面中**隐藏**或**显示**出来

dispaly属性

dispaly属性用于设置一个元素应该如何显示。

• display:none；隐藏对象
• dispaly:block;除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，**不再占有原来的位置**

应用极其广泛，后续搭配JS创造很多效果。

visibility可见性

• inherit : 　继承上一个父对象的可见性
• visible : 　对象可视
• hidden : 对象隐藏

visibility隐藏元素后，**继续占有原来的位置**

overflow：溢出

overflow

属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度时），会发生什么。

注意：

1. 一般情况下，都不想让溢出的部分显示出来，因为会影响网页的布局

2. 有定位盒子，慎重使用隐藏。

   

   右上角的东西超出了大盒子，如果给大盒子添加了overflow那么就会隐藏出去盒子的那部分。（但这个是故意让它溢出去的）

应用

如果隐藏元素后想保留位置，就用visibility

如果隐藏元素后不想保留位置，就用display（用处更多，重点）

overflow只对溢出的部分，进行显示隐藏处理。

土豆网综合案例

注意：

鼠标经过父级元素，遮罩层的类修改dispaly属性。