网页布局，绝对定位和相对定位

时间：2023-01-27 09:05:59

开发网页的过程中我们会经对dom元素定位，一般有一下几中定位方式：

static：,对象遵循正常文档流。top，right，bottom，left等属性不会被应用，通过margin，padding等属性来设置元素的位置

  • relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
  • absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义，出现滚动条时，对象会随着滚动。
  • fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义，一帮用来做悬浮窗等功能。

static（静态定位）
如果没有指定元素的position属性值，也就是默认情况下，元素是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值，它表示块保留在原本应该在的位置，不会重新定位。
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
           background-color: #0062cc;
        }
        .div2{
            width: 300px;
            height: 300px;
            background-color: #2ac845;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
  • 效果如下：
  • 网页布局，绝对定位和相对定位
  • relative（相对定位）

定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在。

　　　　它是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合top,left,right,bottom进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：

　　1)如果没有top,left,right,bottom，以父级的左上角，在没有父级的时候，他是参照浏览器左上角，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开。

　　2)如果设定top,left,right,bottom，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位。

　　3)如果设定top,left,right,bottom，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置 由top,left,right,bottom决定。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位。

以上三点可以总结出， 无论父级存在不存在，无论有没有top,left,right,bottom，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            padding: 50px;
           background-color: #0062cc;
        }
        .div2{
            width: 200px;
            height: 200px;
            position: relative;
            background-color: #2ac845;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>
</html>
效果如下：

网页布局，绝对定位和相对定位

absolute（绝对定位）

　定位为absolute的层脱离正常文本流，但与relative的区别是其在正常流中的位置不再存在。

1)如果没有top、right、bottom、left，以父级的左上角，在没有父级的时候，他是参照浏览器左上角,如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
　　2)如果设定top、right、bottom、left，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由top、right、bottom、left决定。
　　3)如果设定top、right、bottom、left，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由top、right、bottom、left决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根 本没有影响。 

以上三点可以总结出，若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：

　 第一：设定top、right、bottom、left

 　第二：父级设定Position属性

父级设定Position属性：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            top:100px;
            left: 100px;
            padding: 50px;
            position: absolute;
            background-color: #0062cc;
        }
        .div2{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: #2ac845;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>

</body>
</html>
效果如下：

网页布局，绝对定位和相对定位

没有父级：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            top:100px;
            left: 100px;
            padding: 50px;
            position: absolute;
            background-color: #0062cc;
        }
        .div2{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: #2ac845;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
效果如下：

网页布局，绝对定位和相对定位


fixed（固定定位）

生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义，一帮用来做悬浮窗等功能。



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .div1{
            width: 300px;
            height: 300px;
            padding: 50px;
            background-color: #0062cc;
        }
        .div2{
            width: 200px;
            height: 200px;
            position: fixed;
            top:150px;
            left:150px;
            background-color: #2ac845;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>

效果如下：

网页布局，绝对定位和相对定位


总结了网页布局中用到的几种定位方式，大家可以在开发过程中根据具体的需求采用不同的方式对元素进行定位。

标签：

相关文章