CSS基础——定位

一、定位

主要用于布局的属性：盒模型、浮动、定位。

美化页面效果的属性：文字、背景。

脱标的方法：浮动、绝对定位、固定定位。

 

定位作用：让标签针对于某个参考元素进行位置偏移。

属性名：position

属性值：

relative 相对定位

absolute 绝对定位

fixed 固定定位

定位后，如果只要position属性设置，并不能实现位置移动，必须搭配偏移量属性才能实现位置变化。

水平方向：left、right

垂直方向：top、bottom

属性值：常用px为单位的数值。

1、相对定位

参考元素：自身标签的原位置。

属性值：relative，相对的意思。

相对定位必须搭配偏移量属性才能够进行位置移动。

position: relative;

top: 100px;

left: 100px;

注意1：偏移量属性的属性值是区分正负。

正值：表示偏移方向与属性名方向相反。

负值：表示偏移方向与属性名方向相同。

注意2：水平方向使用偏移量属性时，同时设置了left和right属性，不会发生层叠效果，只会听left的效果。垂直方向只会听top属性。

注意3：相对定位为了方便观察偏移方向和距离，习惯找一些参考点进行对比，相对定位可以使用任意的顶点作为参考点，更多的时候喜欢使用偏移方向的组合顶点作为参考点。

left、top：以左上顶点为参考点。

left: -100px;

top: -50px;

注意4：left的正值等价于right的负值，top的正值等于bottom的负值。原因是由于参考元素是自身。

相对定位应用：

①由于相对定位不脱标，导致网页结构比较稳定，所以经常使用相对定位的标签去做绝对定位的参考元素，也就是子绝父相的情况。

②由于相对定位会保持占有原位置，结构稳定，经常用于一些位置的微调效果。

2、绝对定位

参考元素：不固定的，有可能是任意一个祖先元素。参考的是距离最近的有定位的祖先元素，祖先元素如果都没有定位，参考body。

属性值：absolute，绝对的意思。

必须搭配偏移量属性才能发生位置移动。

1 position: absolute;

2 left: 50px;

3 top: 50px;

 

性质：绝对定位的元素脱离标准流，让出了标准流位置。脱标后也不受行块的限制，既能设置宽高，又能随意指定为位置，如果绝对定位的元素不设置宽度和高度，只能被内部内容撑开。

绝对定位的参考元素不是固定的，可能是祖先，也可能是body。

参考元素不同，参考点也都是不同的。

①以body为参考元素的参考点

祖先中如果都没有定位时，参考元素就是body。

body的参考点根据top和bottom分别参与，参考点也是不同的。

第一：如果top参与绝对定位，参考点是body页面左上顶点和右上顶点。

left、top：参考点是body的左上顶点，对比点是盒子自身的左上角。位移就是对比点和参考点之间的距离。

right、top：参考点是body的右上顶点，对比点是盒子自身的右上角。位移就是对比点和参考点之间的距离。

注意：left的正值不再等价于right的负值，原因是参考点和对比点不是一样的。

 

第二：如果有bottom参与定位，参考点是body页面首屏的左下顶点和右下顶点。

left、bottom：参考点是body页面首屏的左下顶点，对比点是标签自身的左下角。

right、bottom：参考点是body页面首屏的右下顶点，对比点是标签自身的右下角。

②以祖先元素为参考元素

参考元素是祖先元素中有定位的，在HTML中距离绝对定位子级最近的祖先元素。祖先元素不区分定位类型，可以是相对定位、绝对定位、固定定位。

1 <div class="box1">                有相对定位

2  <div class="box2">        有绝对定位

3  <div class="box3">    没有定位

4  <p></p>            自身绝对定位，参考元素是距离最近的有定位的box2

5  </div>

6  </div>

7  </div>

②以祖先元素为参考元素

参考元素是祖先元素中有定位的，在HTML中距离绝对定位子级最近的祖先元素。祖先元素不区分定位类型，可以是相对定位、绝对定位、固定定位。

1 <div class="box1">                有相对定位

2  <div class="box2">        有绝对定位

3  <div class="box3">    没有定位

4  <p></p>            自身绝对定位，参考元素是距离最近的有定位的box2

5  </div>

6  </div>

7  </div>

③祖先元素的参考点

参考点根据偏移方向的组合，分别是border以内的四个顶点，绝对定位元素位置移动时，会忽视参考元素的padding区域，直接在对比点和参考点之间发生位置移动。

left、top：参考点是参考元素border以内的左上角，对比点是自身的左上顶点。

right、top：参考点是参考元素border以内的右上角，对比点是自身的右上顶点。

left、bottom：参考点是参考元素border以内的左下角，对比点是自身的左下顶点。

right、bottom：参考点是参考元素border以内的右下角，对比点是自身的右下顶点。

1 right: -50px;

2 bottom: -50px;

 

实际挑选组合方向时，根据子级距离参考元素那里更近，优先选择近的顶点。

参考元素可以是三种定位中的任意一种，包含子绝父相、子绝父绝、子绝父固，由于相对定位的元素不脱离标准流，作为参考元素位置比较稳定，最常用的是子绝父相。

绝对定位最重要的是参考点是谁，跟祖先元素的宽高没有太多关系。

④制作压盖

绝对定位脱离标准流，可以压盖其他的元素。

而且可以通过设置偏移量属性指定压盖位置。

1 <div class="box">                        相对定位，参考元素

2  <img src="images/1.jpg" alt="" />

3  <p></p>                               绝对定位

4 </div>

⑤居中

标准流中小盒子在大盒子中居中，使用的是小盒子用margin：0 auto挤到中间位置。

这种方法不适用于绝对定位的子元素。

制作方法：

第一步：给子元素设置left的值为50%，百分比的参考的是参考元素祖先级的width+padding的值。导致子盒子的左顶点走到了参考元素中线位置。

left: 50%;

第二步：应该将子盒子的中线拽到参考元素中心位置，方法是给子盒子一个与left方向相同的margin，属性值为子盒子宽度的一半的负值。

1 margin-left: -50px;

3、固定定位

参考元素：浏览器窗口。

属性值：fixed，固定的意思。

参考点是浏览器窗口的四个顶点，对比点是标签的偏移组合方向的顶点。

由于参考元素不会消失，导致固定定位的元素会永远悬浮在浏览器之上。

搭配偏移量属性进行位置移动。

1 position: fixed;

2 right: 50px;

3 bottom: 50px;

性质：固定定位的元素脱离标准流，让出标准流位置，既能设置宽度和高度，又能指定在浏览器窗口的位置，不设置宽度和高度，只能被内容撑开。