css定位

最新推荐文章于 2021-04-30 01:39:38 发布

honeyws

最新推荐文章于 2021-04-30 01:39:38 发布

阅读量869

点赞数 1

分类专栏： Web前端基础文章标签： css定位

本文链接：https://blog.csdn.net/weixin_44802155/article/details/103028945

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在css中，通过css定位，可以实现网页元素的精准定位。css定位和css浮动类似，因为是控制网页布局的操作，css定会为更加灵活，可以针对更多个性化的布局方案来使用。在网页布局实战中，灵活使用这两种布局方式，能够创建多种高级而精准的布局。
定位属性
制作网页时，css可以定位属性将一个元素精准的放在页面上指定位置。元素的定位属性由定位模式和位置属性两部分构成。
定位模式
在css中，position属性用来定义元素的定位模式，其常用的属性值有四个。分别表示不同的定位模式。
position属性的常用值
static 静态定位
relative 相对定位，相对于其原文档流的位置进行定位
absolute 绝对定位，相对于上一个已经定位的父元素进行定位。
fixed 固定定位，相对于浏览器窗口进行定位。
静态定位就是默认的方式，当position属性设置为static时，可以将元素定位与静态位置，静态位置就是各个元素在HTML文档流中默认的位置。
在默认状态下任何元素都会以静态定位来确定位置，因此，当元素未设置position属性时，会遵循默认值显示为静态位置。
位置属性
定位模式仅仅定义了元素的定位模式而并不明确元素的具体位置。在css中，位置属性用来精准定义定位元素的位置，其取值为不同单位的数值或百分比，定位属性包括top，bottomm，left，right
top 顶部偏移量
bottom 底部偏移量
left 左侧偏移量
right 右侧偏移量
相对定位
元素相对于它在原文档流中的位置进行定位，position属性的取值为relative。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        #qwe{
            width: 50px;
            height: 50px;
            background:red;
        }
        #asd{
            width: 50px;
            height: 50px;
            background: green;
            position: relative;
        }
        #zxc{
            width: 50px;
            height: 50px;
            background: cyan;
        }
    </style>
</head>
<body>
    <div id="qwe"></div>
    <div id="asd"></div>
    <div id="zxc"></div>
</body>
</html>

给元素只添加relative值，对元素本身并没有任何影响，只是设置其相对定位，因此还需要通过定位来改变元素的位置，但他在文档流中的位置仍然保留。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #qwe{
            width: 50px;
            height: 50px;
            background: cyan;
        }
        #asd{width: 50px;
        height: 50px;
        background: darkblue;
        position: relative;
        left: 50px;
        top: 50px;
        }
        #zxc{
            width: 50px;
            height: 50px;
            background: darkorange;
        }
    </style>
</head>
<body>
    <div id="qwe"></div>
    <div id="asd"></div>
    <div id="zxc"></div>
</body>
</html>

元素在设置left值50px和top值50px条件下，可以移动到指定的位置。相对定位是相对于元素本身的左上角进行偏移的。相对定位的偏移并没有影响到其他元素的位置。
需要注意一点，定位模式和位置属性是配合在一起使用的，如果只定义一种，则对元素不起任何作用。
绝对定位
元素相对于已经定位（相对，绝对或固定定位）的父元素进行定位。若所有的父元素没有定位，则依据浏览器窗口左上角进行定位。当position属性值为absolute时，可以将元素的定位模式设置为绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #qwe{
            width: 50px;
            height: 50px;
            background: cyan;
        }
        #asd{width: 50px;
        height: 50px;
        background: green;
        position: absolute;
       
        }
        #zxc{
            width: 50px;
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="qwe"></div>
    <div id="asd"></div>
    <div id="zxc"></div>
</body>
</html>

asd叠加到zxc的上面，这说明绝对路径会脱离文档流。
asd没有父元素，因此其定位将根据浏览器窗口左上角进行偏离。
与浮动类似块元素绝对定位后，默认宽与内容的宽相同。
块元素添加绝对定位后，默认宽与内容的宽相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       div {   background: cyan; position: absolute;}
    </style>
</head>
<body>
    <div>这是一个标签</div>
</body>
</html>

嵌套结构中的绝对定位。当父元素和祖先元素中由相对元素或绝对定位时，子元素的绝对定位将相对父元素和祖先元素进行定位。当父元素都没有定位属性时，子元素将相对于浏览器窗口进行偏移。
嵌套结构中的绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #qwe{ width: 50px; 
        height: 50px;
        background: cyan;
       margin-left:50px ;
        position:relative; }
        #asd{
            width: 50px;
            height: 50px;
            background: darkmagenta;
            position: absolute;
            top: 50px; left : 50px;
        }
    </style>
</head>
<body>
    <div id="qwe"></div>
    <div id="asd"></div>
</body>
</html>

固定定位
通过position属性值设置为fixed来实现。固定定位与绝对定位类似，也是脱离文档流。二者的不同点时当元素的position属性设置为fixed时，元素将被固定，及不会随滚动条的拖动而改变位置。在视野中，固定定位的元素的位置不会改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{height: 1000px;}
    #box1{
        width: 50px;
        height: 50px;
        background: darkmagenta;
    }
    #box2{
        width: 50px;
        height: 50px;
        background: darksalmon;
        position: fixed;top: 50px;
        left: 50px;
    }
    #box3{
        width: 50px;
        height: 50px;
        background: greenyellow;
    }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

固定定位与绝对定位还有一个不同点是固定定位永远都是相对浏览器窗口左上角进行偏移。网页中的回到顶部按钮就是用固定定位实现的。
回到顶部按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    body{
        height: 10000px;
    }
    #top{
        width: 35px;
        background: hotpink;
        color: indigo;
        font-size: 12px;text-align: center;
        letter-spacing: 1px;line-height: 16px;
        position: fixed; bottom: 4px; right: 4px;
    }
    </style>
</head>
<body>
    <div id="top">回到顶部</div>
</body>
</html>

定位的层次
当多个元素添加定位操作时，可能会出现叠加情况，即在默认的情况下输出HTML结构层次就会越高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 50px;
            height: 50px;
            background: red;
            position:absolute;
            left:0; top:0;
        }
        #box2{
            width: 50px;
            height: 50px;
            background: rosybrown;
            position: absolute; left:25px;
            top: 25px;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

定位层次与定位属性配套使用，用于调节层次的z-index属性，其属性值用数字表示，数字越大，层级越高。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 50px;
            height: 50px;
            background: fuchsia;
            position: absolute;
            left: 0; top: 0;
            z-index: 2;
        }
        #box2{
            width: 50px;
            height: 50px;
            background: goldenrod;
            position: absolute;
            left: 25px;top: 25px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

honeyws

关注

1
点赞
踩
10

收藏

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

在css中，通过css定位，可以实现网页元素的精准定位。css定位和css浮动类似，因为是控制网页布局的操作，css定会为更加灵活，可以针对更多个性化的布局方案来使用。在网页布局实战中，灵活使用这两种布局方式，能够创建多种高级而精准的布局。定位属性制作网页时，css可以定位属性将一个元素精准的放在页面上指定位置。元素的定位属性由定位模式和位置属性两部分构成。定位模式在css中，positi...
复制链接

扫一扫

专栏目录