首页 > 代码库 > css笔记：元素的位置

css笔记：元素的位置

2024-09-22 01:56:47   248人阅读

CSS中，元素的位置是通过偏移来定位的，偏移是相对包含元素的父元素的左上角来定义的，偏移量通常用left(水平)偏移和top(垂直)偏移来设置或读取。

定位的类型：定位的类型用position设置，设置值有absolute , fixed , relative , static ,inhert。

static(静态定位):这是元素的默认的定位方式，遵循默认的文档流,当元素设置static定位时，使用left和top来设置偏移位置是无效的。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的static定位</title>
<style type="text/css">
    div{
        width:200px;
        height:100px;
        border:1px solid red ;
    }
    div.static{
        position:static;
        left:100px;
        top:200px;
    }
</style>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
</body>
</html>

上面还没为元素设置定位的显示结果如下图：

技术分享

为元素设置static定位

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的static定位</title>
<style type="text/css">
    div{
        width:200px;
        height:100px;
        border:1px solid red ;
    }
    
    div.static{
        position:static;
        left:100px;
        top:200px;
    }
</style>
</head>
<body>
<div>第一个div</div>
//为元素设置static定位
<div class="static">第二个div</div>
</body>
</html>

显示结果与没有设置定位的结果是一样的效果

技术分享

relative(相对定位):这种方式与静态(相似),元素会默认遵循文档流。但是设置了top和left属性时，元素会相对它原始的位置进行偏移。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的relative定位</title>
<style type="text/css">
    div{
        width:200px;
        height:100px;
        border:1px solid red ;
    }
    
    div.relative{
        position:relative;
        left:100px;
        top:30px;
    }
</style>
</head>
<body>
//元素未设置定位属性
<div>第一个div</div>
<div>第二个div</div>
</body>
</html>

未设置relative定位时，元素默认是static定位效果

技术分享

为元素设置relative定位，元素会相对自己原始的位置按top和left的设置值进行位置偏移

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的relative定位</title>
<style type="text/css">
    div{
        width:200px;
        height:100px;
        border:1px solid red ;
    }
    
    div.relative{
        position:relative;
        left:100px;
        top:30px;
    }
</style>
</head>
<body>
<div>第一个div</div>
//为元素设置relative定位，且设置top和left偏移值
<div class="relative">第二个div</div>
</body>
</html>

显示效果

技术分享

absolute(绝对定位)：绝对定位是完全跳出了页面的文档流，设置了绝对定位的元素，会以元素的第一个非静态定位的父元素而显示，如果没有非静态的父元素则以显示窗口为父元素。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的absolute定位</title>
<style type="text/css">
    div{
        width:200px;
        height:100px;
        border:1px solid red ;
        padding:0px;
        margin:0px;
    }
    
    .absolute{
        position:absolute;
        left:200px;
        top:30px;
    }
    .father{
        width:400px;
        height:400px;
        border:1px solid blue ;
        
    }
</style>
</head>
<body>
//父元素是静态定位时， 设置了absolute定位的子元素会以整个文档窗口为父元素进行偏移
<div class="father">
   <div>第一个div</div>

    <div class="absolute">第二个div</div>
</div>
</body>
</html>

父元素是静态定位时，子元素的绝对定位显示结果。

技术分享

为父元素设置非静态定位，子元素设置绝对定位

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>元素的absolute定位</title>
<style type="text/css">
    div{
        width:200px;
        height:100px;
        border:1px solid red ;
        padding:0px;
        margin:0px;
    }
    
    .absolute{
        position:absolute;
        left:200px;
        top:30px;
    }
    .father{
        width:400px;
        height:400px;
        border:1px solid blue ;
        posiotion:relative;     //为父元素设置相对定位
       }
</style>
</head>
<body>
<div class="father">
<div>第一个div</div>
<div class="absolute">第二个div</div>
</div>
</html>
当父元素设置了非静态定位时，子元素会以父元素为基准进行偏移
技术分享

css笔记：元素的位置


联系
我们