Html 相对定位

最新推荐文章于 2024-07-18 20:06:09 发布

大伟伟

最新推荐文章于 2024-07-18 20:06:09 发布

阅读量2.7k

点赞数 1

分类专栏： h5 html

本文链接：https://blog.csdn.net/wswhero/article/details/86610531

版权

h5 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

html

3 篇文章 0 订阅

订阅专栏

定位：
定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
当元素的position属性设置为relative时，则开启了元素的相对定位
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联

position: relative;

<body>

       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>

       <span class="s1">我是一个span</span>

   </body>

如下图：

绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位

绝对定位：

1.开启绝对定位，会使元素脱离文档流

2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位。

4.绝对定位会使元素提升一个层级

5.绝对定位会改变元素的性质，
* 内联元素变成块元素，
* 块元素的宽度和高度默认都被内容撑开

固定定位
               * 当元素的position属性设置fixed时，则开启了元素的固定定位
               *    固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
               * 不同的是：
               *        固定定位永远都会相对于浏览器窗口进行定位
               *        固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
               *
               * IE6不支持固定定位
             position: fixed;