CSS网页布局教程:绝对定位和相对定位攻略

CSS绝对定位和相对定位是CSS布局中的一种重要方法。它可以让我们更灵活地将内容定位到页面上的任何位置，并且让页面响应式布局更加容易实现。

概述

绝对定位和相对定位是将HTML元素放置在网页上的方法，通过指定元素的位置来控制它的位置。

相对定位（relative）会按照元素本身在文档流中的位置移动，而绝对定位（absolute）则是相对于其父元素进行定位，不影响其他元素的位置。

绝对定位

绝对定位将元素相对于其最近的已经定位的祖先元素进行定位。如果元素没有已经定位的祖先元素，那么它会相对于最初的包含块（即 <html> 元素）进行定位。

#container {
    position: relative;
    height: 200px;
    width: 300px;
}

#box1 {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}

在上述代码中，#container 元素被指定了相对定位，并设置了 height 和 width 属性。#box1 元素使用绝对定位，并被放置在了 #container 元素内部。它的 top: 50px; left: 50px; 属性让它距离 #container 的顶部和左边缘均为50px。

相对定位

相对定位会沿着元素自身原本在文档流中的位置进行移动，并不影响其他元素的位置。

#box2 {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: blue;
}

在上面的代码中，#box2 元素被指定了相对定位，并且指定了 top: 50px; left: 50px; 属性。这将会让 #box2 元素向下和向右各移动50px，而不会影响其他元素的位置。

总结

相对定位和绝对定位是非常有用的CSS布局工具。理解了这两种定位的基本概念和语法之后，我们可以使用它们来实现各种复杂的布局效果。

示例一:

<div id="container1">
    <div id="box3"></div>
</div>

<style>
#container1 {
    position: relative;
    height: 200px;
    width: 300px;
    background-color: yellow;
}

#box3 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: green;
}
</style>

在该示例中，#container1元素被指定了相对定位，并设置了 height 和 width 属性。#box3 使用绝对定位并使用了 top: 50%; left: 50%; 属性实现居中。另外使用了transform: translate(-50%, -50%);属性让它在水平和竖直方向上都居中。

示例二：

<div id="container2">
    <div id="box4"></div>
    <div id="box5"></div>
</div>

<style>
#container2 {
    position: relative;
    height: 200px;
    width: 300px;
    background-color: yellow;
}

#box4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: purple;
}

#box5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    background-color: red;
}
</style>

在该示例中，#container2元素被指定了相对定位，并设置了 height 和 width 属性。#box4 使用绝对定位并使用了 top: 50%; left: 50%; 属性实现居中。另外使用了transform: translate(-50%, -50%);属性让它在水平和竖直方向上都居中。#box5使用了相对定位，并且设置了 top: 0; left: 0; right: 0; bottom: 0; margin: auto;属性，这使得它居中于父容器。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：CSS网页布局教程:绝对定位和相对定位 - Python技术站

CSS网页布局教程:绝对定位和相对定位

CSS网页布局教程:绝对定位和相对定位攻略

概述

绝对定位

相对定位

总结

相关文章