HTML-定位网页元素

朴灿烈づ我的快乐病毒、 2022-05-12 07:28 264阅读 0赞

## **定位** ##

**定位在网页中的应用**

![70][]

![70 1][]

![70 2][]

### position属性 ###

**1. static：**默认值，没有定位

![70 3][]

**2. relative：相对定位**

相对自身原来位置进行偏移：偏移设置：top、left、right、bottom

![70 4][]

![70 5][]

![70 6][]

**相对定位元素的规律**

1.**设置相对定位的盒子会相对它****原来的位置****，通过指定偏移，到达新的****位置**

2.**设置****相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何****影响**

3.**设置****相对定位的盒子原来的位置会****被保留****下来**

**浮动元素设置相对定位**

**先设置第二个盒子右浮动，再设置第一、第二盒子相对定位**

![70 7][]

![70 8][]

**3. absolute：绝对定位**

absolute属性值：偏移设置： left、right、top、bottom

![70 9][]

**绝对定位小结：**

1.**使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移**

2.**如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位**

3.**绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响**

4.**元素位置发生偏移后，它原来的位置不会被保留下来**

**绝对定位不设置偏移量**

![70 10][]

**设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。**

**在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况**

**4. fixed：固定定位**

fixed属性值：偏移设置： left、right、top、bottom

类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口

div:nth-of-type(1) {  /*第一个div设置绝对定位*/
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                right: 0;
                bottom: 0;
     }
    div:nth-of-type(2) {  /*第二个div设置固定定位*/
                width: 50px;
                height: 50px;
                background: yellow;
                position: fixed;
                right: 0;
                bottom: 0;
    }

![70 11][]

body{
         height: 1000px;
      }

![70 12][]

此时：滑动滚动条，红色块会向上走，黄色块不动；因为红的块是绝对定位，它所谓的相对于浏览器窗口来进行定位，是在一屏之内，超过一屏就不是那个地方了；而黄色的块是固定定位，一直都是浏览器的固定位置，超过一屏之后还是那个地方

**定位小结**

**一、相对定位的****特性:**

**           1.****相对****于自己的初始位置来****定位 **

**           2.****元素****位置发生偏移后，它原来的位置会被保留****下来 **

**           3.****层级****提高，可以把标准文档流中的元素及浮动元素盖在****下边**

**二、相对定位的使用****场景:  **

**相对****定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量**

**三、****绝对定位的****特性：**

**             1.****绝对定位是相对于它的定位父级的位置来****定位，如果****没有设置定位父级****，则相对****浏览器窗口来****定位**

**             2.****元素****位置发生偏移后****，原来****的位置不会被****保留**

**             3.****层级****提高，可以把标准文档流中的元素及浮动元素盖在****下边**

**             4.****设置****绝对定位的元素脱离文档流**

**四、****绝对定位的使用****场景**

**一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景**

**五、****固定****定位****的****特性**

**          1.****相对浏览器窗口来****定位**

**          2.****偏移****量不会随滚动条的移动而移动**

**六、****固定定位的使用场景**

**一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等**

## **z-index属性：** ##

调整元素定位时重叠层的上下位置：

1.  z-index属性值：整数，默认值为0
2.  设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
3.  z-index值大的层位于其值小的层上方

![70 13][]

**网页元素透明度**

![70 14][]

**小结**

**a.网页中的元素都含有两个堆叠层级**

**            1.****未设置绝对定位时所处的环境****，****z-index****是****0**

**            2.****设置绝对定位时所处的堆叠环境，此时层的位置由****z-index****的值确定**

**b.改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的****z-index****值即可**

![70 15][]

[70]: /images/20220512/9c52be97a1f7411886f354aea0d42090.png
[70 1]: /images/20220512/f12b2da048b54d90a451b0b52a2eb8a7.png
[70 2]: /images/20220512/9b9c111c096b420d90645dab6a16358c.png
[70 3]: /images/20220512/10367e0a4f794514a8f83df3b25fd2eb.png
[70 4]: /images/20220512/0e7cfb9481334d13905c57840aebc59f.png
[70 5]: /images/20220512/89edb63537814f72a2bc596100c2ff30.png
[70 6]: /images/20220512/de8950823f094f42abd862295630f136.png
[70 7]: /images/20220512/d0934b45ee2340e49d24a66334a120a1.png
[70 8]: /images/20220512/c0ca17c7e76d424b8a7a1512b5aa5299.png
[70 9]: /images/20220512/4f3b4c8f63bd4c9a8ac4e93d1a66c94a.png
[70 10]: /images/20220512/4765f48ef5fa4b20b7a71071ff839861.png
[70 11]: /images/20220512/febc02c64639411095401c3f5792c54c.png
[70 12]: /images/20220512/386e94b768834f3297e9d1bc9dacb572.png
[70 13]: /images/20220512/f3f17257da304ea3b43c667227a1a7d0.png
[70 14]: /images/20220512/fae0f32ab3134c6bb0e8c904eb33df64.png
[70 15]: /images/20220512/6bbfbbb45d834879ba60aa64fa944eb1.png