CSS简单学习（五）-元素定位

最新推荐文章于 2025-06-24 00:35:55 发布

zhang___gang

最新推荐文章于 2025-06-24 00:35:55 发布

阅读量548

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/zhang___gang/article/details/84887634

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解CSS中的元素定位技巧，包括float、position和z-index属性的使用，如何实现块元素的精确布局，以及清除浮动的方法。通过实际示例，帮助读者理解不同定位方式的特点和应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

元素定位

网页中各种元素有自己的位置，从而搭建出整个页面结构。可以使用CSS的float、position和z-index属性来进行块元素的定位。

float：浮动

left：元素向左紧靠
right：元素向右紧靠
none（默认）

元素浮动后：宽度自适应，宽度包裹内容，
影响后面元素的摆放，后面元素占据原来这个元素的空间，但是里面的内容不会与浮动元素重叠，围绕这个浮动元素
浮动元素可以设定margin来保持和周围元素的距离

举例：如果son1作为菜单导航，son2作为正文内容，然后将父块的边框和背景隐藏起来，这样就是一种很流行的排版方式。

默认情况下：块级元素，宽度是整行的宽度，可以设定高度和宽度，height和width

行级元素的高度和宽度设置无效

示例：

<!--float浮动-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        .father{
            border: solid 1px blue;
            width: 100%;  /*铺满*/
        }
        .son1{
            border: solid 1px red;
            float: left; /*向左浮动*/
            margin:10px;
            /*float:right; !*向右浮动*!*/
        }
        .son2{
            border: solid 1px green;
            width: 50%;
            height: 100px;
            float:left;
        }
        .son3{
            border: solid 1px purple;


            width:50px; /*行级元素的高度和宽度设置无效*/
            height: 50px;
        }
        .son4{
            border: solid 1px dimgray;
        }
    </style>
</head>
<body>
    <div class="father"> <!--div元素的边距默认为0-->
        <div class="son1">float1</div>
        <div class="son2">float2</div>


        <!--<div class="son3">div</div>  &lt;!&ndash;会占满一行，后面的元素另起一行&ndash;&gt;-->


        <!--<div class="son2">float2</div>
        <div class="son2">float2</div>
        <div class="son2">float2</div>
        <div class="son2">float2</div>
        <div class="son2">float2</div>
        <div class="son2">float2</div>
        <div class="son2">float2</div> &lt;!&ndash;有多个浮动，一个挨着一个摆放，空间不够另起一行&ndash;&gt;-->

        <span class="son3">span1</span><!--该注释可以消去两个span之间的间距
        --><span class="son4">span2</span>
    </div>
</body>
</html>

clear：清除浮动

3个属性：left，right，both（清除左右两个浮动）
使元素不在和浮动元素位置重叠，而是从不重叠的位置开始摆放

示例：

<!--clear清除浮动-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clear</title>
    <style type="text/css">
        .block1{
            float: left; /*图片浮动后，后面的两个div和h3都会浮动上来*/
        }
        h3{
            clear:left; /*清楚浮动，使h3之后不在浮动上去*/
        }
    </style>
</head>
<body>
    <div class="block1"><img src="imgs/photo1.jpg"/></div>
    <div>对于一个网页设计者来说，HTML语言一定不会感到陌生，
        因为它是所有网页制作的基础。但是如果希望网页能够美观、大方，并且升级方便，
        维护轻松，那么仅仅HTML是不够的，CSS在这中间扮演着重要的角色。</div>
    <h3>CSS的概念</h3>
    <div>CSS(Cascading style Sheet)，中文译文层叠样式表，是用于控制网页样式并允许样式信息
    与网页内容分离的一种标记性语言。</div>
</body>
</html>

position：

static，默认的，摆放元素时，按照元素顺序依次摆放

absolute，绝对的

元素脱离了原来的文档流，
left，top，right，bottom,：设定位置
- 如果它的所有父级元素position都是默认的static（没有设置），此时是相对于浏览器界面，而不是父块的距离
如果它的父级元素position不使用static，此时它是相对离它最近的非static父级元素定位
注：
- 如果元素原来是行级元素，会变成块级元素
- 元素的宽度默认调整为包裹内容（可手动调整）

示例

<!--position的absolute-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:absolute</title>
    <style type="text/css">
        #father{
            border:solid 1px red;
        }
        #son1{
            border:solid 1px green;
            position: absolute;  /*绝对的，father为static，即默认，所以相对于浏览器*/
            left:100px;
            top:50px;
        }
        #son2{
            border:solid 1px green;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">son1</div>
        <div id="son2">son2</div>
    </div>
</body>
</html>

relative，相对的

元素可以相对自己的位置做偏移，没有脱离原来的文档流
它的偏移不会影响其他元素

示例

<!--relative：相对的-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>position:relative</title>
    <style type="text/css">
        #father{
            border:solid 1px red;
        }
        #son1{
            border:solid 1px green;
            position: relative;  /*相对的，相对于自己偏移*/
            left: 10px;
            top:20px;
        }
        #son2{
            border:solid 1px green;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="son1">son1</div>
    <div id="son2">son2</div>
</div>
</body>
</html>

可以把relative和absolute结合起来使用，使子元素在父元素内随意摆放

示例

<!--absolute和relative结合使用，可以非常灵活-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute and relative</title>
    <style type="text/css">
        #father{
            position:relative;
            width:200px;
            height: 120px;
            border:solid 1px red;
        }
        #son1{
            position: absolute;  /*father不再是默认的static，而是
            relative，所以是相对于father*/
            left: 50px;
            top: 20px;
            width: 100px;
            height: 80px;
            border:solid 1px green;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">son1</div>
    </div>
</body>
</html>

fixed，相对浏览器的绝对布局（和absolute差不多，但永远相对于浏览器）

z-index：

改变重叠元素的上下位置
值大的覆盖值小的，可以时正数或负数

示例：

<!--z-index修改重叠元素的显示顺序-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index</title>
    <style type="text/css">
        #div1{
            position: absolute;
            left: 10px;
            top:10px;
            border:solid 1px red;
            background-color: red;
            z-index: 3;  /*通过z-index改变重叠元素的显示顺序，值大的覆盖值小的*/
        }
        #div2{
            position: absolute;
            left: 20px;
            top:20px;
            border:solid 1px blue;
            background-color: blue;
            z-index: 2;
        }
        #div3{
            position: absolute;
            left: 30px;
            top:30px;
            border:solid 1px green;
            background-color: green;
            z-index: 1;
        }
    </style>
</head>
<body>
    <!--默认C覆盖B，B覆盖C-->
    <div id="div1">AAAAAAAAAA</div>
    <div id="div2">BBBBBBBBBB</div>
    <div id="div3">CCCCCCCCCC</div>
</body>
</html>