css中的定位

最新推荐文章于 2024-07-18 17:34:14 发布

qq_37860317

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量161

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_37860317/article/details/101301845

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css中的定位

定位 (position)
元素的定位属性主要包括定位模式和边偏移两部分
1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

2、定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
选择器{position:属性值;}
position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

自动定位
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置

*相对定位
相对定位是将元素相对于它在标准流中的位置进行定位，对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。即相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
绝对定位
绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。

子绝父相（******重要）
因为子级是绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方。
父盒子布局时，需要占有位置，因此父亲只能是相对定位

固定定位
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

固定定位有两点：

固定定位的元素跟父亲没有任何关系，只认浏览器。
固定定位完全脱标，不占有位置，不随着滚动条滚动。
案例：

 <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    
            * {
                margin: 0;
                padding: 0;
            }
            div {
                position: relative;
                width: 520px;
                height: 280px;
                margin: 10px auto;
            }
    
            .left {
                position: absolute;
                top: 50%;
                margin-top: -18px;
                left: 0;
            }
    
            .right {
                position: absolute;
                top: 50%;
                margin-top: -18px;
                right: 0;
    
            }
    
            ul {
                list-style:none;
                width: 65px;
                height: 13px;
                background: rgba(255,255,255,0.3);
                position: absolute;
                bottom: 15px;
                left: 50%;
                margin-left: -32px;
                border-radius: 6px;
            }
    
            ul li {
                width: 9px;
                height: 9px;
                background-color: #B7B7B7;
                float: left; 
                margin: 2px;  
                border-radius: 50%;  /* 圆角的做法 */
            }
    
            .current {
                background-color: #f40;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="images/taobao.jpg" alt="">
            <img src="images/left.png" alt="" class="left">
            <img src="images/right.png" alt="" class="right">
            <ul>
                <li class="current"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    
        </div>
    </body>
    </html>

  <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .banner {
                width: 1519px;
                height: 44px;
                position: fixed;
                top: 0;
    
            }
    
            .content {
                margin: 0 auto;
                width: 1002px;
                height: 1760px;
            }
    
            .ad-l,
            .ad-r {
                position: fixed;
                top: 200px;
            }
    
            .ad-l {
                left: 0;
            }
    
            .ad-r {
                right: 0;
            }
        </style>
    
    </head>
    <body>
        <div class="banner">
            <img src="images/top.png" alt="">
        </div>
        <div class="content">
            <img src="images/ad-l.png" alt="" class="ad-l">
            <img src="images/ad-r.png" alt="" class="ad-r">
            <img src="images/box.png" alt="">
        </div>
    </body>
    </html>

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

qq_37860317

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css中的定位

css中的定位定位 (position)元素的定位属性主要包括定位模式和边偏移两部分1、边偏移边偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离right右侧偏移量，定义元素相对于其父元素右边线的距离2、定位模式...
复制链接

扫一扫