脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 > CSS position属性

CSS 中的position属性实例详解

  发布时间：2023-09-04 17:03:08   作者：生而自由爱而无畏   我要评论
这篇文章主要介绍了CSS 中的position属性实例详解,定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed），本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下

CSS 的position属性

就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。

定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。默认就是static。所以我们略过。

元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。

方位属性：

/*
top：让元素相对于指定目标的顶部偏移指定的距离。
  例如： top：10px; 表示距离顶部10像素
right：让元素相对于指定目标的右边偏移指定的距离。
  例如： right：10px; 表示距离顶部10像素
bottom：让元素相对于指定目标的底部偏移指定的距离。
  例如： bottom：10px; 表示距离顶部10像素
left：让元素相对于指定目标的左边偏移指定的距离。
  例如： left：10px; 表示距离顶部10像素
*/

相对定位（relative）

相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。

.c1{
            width: 200px;
            height: 200px;
            background-color: indianred;
        }
        .c2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: relative;
            left: 200px;
            top: 200px;
        }
        .c3{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }

绝对定位（absolute）

绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。
轮播图案例：

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
        <meta charset="utf8">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .lunbo{
                width: 590px;
                height: 470px;
                border: 1px solid rebeccapurple;
                margin: 100px auto;
                position: relative;
            }
            .lunbo ul{
                list-style: none;
            }
            .lunbo .img li{
                position: absolute;
                top: 0;
                left: 0;
            }
            .lunbo .btn li{
                font-size: 25px;
                width: 40px;
                height: 40px;
                background-color: gray;
                text-align: center;
                line-height: 40px;
                border-bottom-right-radius: 50%;
                border-top-right-radius: 50%;
                color: white;
                position: absolute;
                top: 50%;
                margin-top: -20px;
            }
            .lunbo .left_btn{
                left: 0;
            }
            .lunbo .right_btn{
                right: 0;
            }
        </style>
  </head>
  <body>
  <div class="lunbo">
      <ul class="img">
          <li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
          <li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
      </ul>
      <ul class="btn">
          <li class="left_btn"> < </li>
          <li class="right_btn"> > </li>
      </ul>
  </div>
  </body>
</html>

固定定位（fixed）
固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
      <meta charset="utf8">
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 100%;
            height: 2000px;
            background-color: lightgray;
        }
        .c2{
            width: 200px;
            height: 60px;
            background-color: yellowgreen;
            text-align: center;
            line-height: 60px;
            position: fixed;
            right: 20px;
            bottom: 20px;
        }
    </style>
  </head>
  <body>
   <div class="c1"></div>
   <div class="c2">返回顶部</div>
  </body>
</html>

到此这篇关于CSS 的position属性的文章就介绍到这了,更多相关CSS position属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

相关文章

  • CSS中的 position属性sticky详解

    这篇文章主要介绍了CSS中的 position属性sticky的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-12

  • css position属性为absolute时其百分值的计算

    这篇文章主要介绍了css position属性为absolute时其百分值的计算,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小
    2019-08-06

  • 详解CSS中position属性介绍(新增sticky)

    这篇文章主要介绍了详解CSS中position属性介绍(新增sticky) 的相关资料，position的含义是指定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和stic
    2018-12-17

  • css中的position属性值的探究(小结)

    这篇文章主要介绍了css中的position属性值的探究(小结)的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-25

  • css关于position属性的用法详解(绝对定位和相对定位的混淆)

    下面小编就为大家带来一篇css关于position属性的用法详解(绝对定位和相对定位的混淆)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-08

  • 浅谈CSS中display/float/position属性值的相互影响

    下面小编就为大家带来一篇浅谈CSS中display/float/position属性值的相互影响。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-17

  • 图解CSS中position属性的定位用法

    这篇文章主要介绍了图解CSS中position属性的定位用法,重点讲解了相对定位和绝对定位在页面布局中的作用,需要的朋友可以参考下
    2016-04-28

  • CSS的position属性完全解析

    这篇文章主要介绍了CSS的position属性的完全解析,包括position和overflow在一些相似使用方面的对比,需要的朋友可以参考下
    2015-11-06

  • CSS样式position属性的一个小实例:z方向三层布局分析

    使用CSS样式中的position属性实现z方向三层布局效果，本文甚是疑惑，于是乎搜集整理一番，晒出代码和大家分享一下
    2012-12-07

最新评论

关注微信公众号

扫一扫