定位的特殊应用

最新推荐文章于 2025-08-22 15:07:29 发布

原创最新推荐文章于 2025-08-22 15:07:29 发布 · 521 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5 #前端

HTML5 专栏收录该内容

7 篇文章

订阅专栏

博客聚焦于前端定位元素的处理，针对绝对定位和固定定位元素，介绍了定位元素块的宽充满包含块的方法，即设置left、right为0；还讲解了让定位元素在包含块中居中的实现方式，同时提醒定位元素需设置宽高，开启定位后慎用margin属性。

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

注意：发生固定定位，绝对定位后，元素都变成了定位元素，默认高宽被内容撑开，则可以设置宽高；以下只针对绝对定位和固定定位的元素，不包括相对定位元素。

1.定位元素块的宽充满包含块

前提：定位元素的宽高未知

说明：定位元素的宽想要与包含块的宽一致，设置left,right等于0；定位元素的高想要与包含块的高一致，设置top，bottom等于零

1.1代码实现

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素的特殊的应用</title>
    <style>
        .outer{
            width: 666px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .inner{
          position: absolute;
          border: 3px double red;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          text-align: center;
          
        }
    </style>
</head>
<body>
   <div class="outer">
    <div class="inner">小黑子</div>
   </div> 
</body>
</html>

1.2图片实例

2.让定位元素在包含块中居中

注意：定位的元素必须设置宽高

2.1代码实现（方法一）

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素的特殊的应用</title>
    <style>
        .outer{
            width: 666px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .inner{
          position: absolute;
          border: 3px double red;
          width: 300px;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto;
          text-align: center;
          
        }
    </style>
</head>
<body>
   <div class="outer">
    <div class="inner">小黑子</div>
   </div> 
</body>
</html>

2.2图片实例

2.3代码实现(不常用）

注意：一般开启了定位就不在用设置marin属性，因为不方便计算

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位元素的特殊的应用</title>
    <style>
        .outer{
            width: 666px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        .inner{
          position: absolute;
          border: 3px double red;
          width: 300px;
          height: 100px;
          left: 50%;
          top: 50%;
          margin-left: -150px;
          margin-top: -50px;
          
          text-align: center;
          
        }
    </style>
</head>
<body>
   <div class="outer">
    <div class="inner">小黑子</div>
   </div> 
</body>
</html>