css 绝对定位 高度自适应

CSS是前端开发不可或缺的一项技能。绝对定位和高度自适应的应用，能够实现更加灵活多变的页面布局。下面我们来详细了解一下。

绝对定位（position:absolute）属性可以让一个元素相对于父元素（或祖先元素）的定位。它不会影响其他元素的布局，因为元素从文档流中脱离。使用绝对定位，我们可以使元素移动到页面上的任何位置。比较常见的应用场景是轮播图或弹出框的展示。下面是一个简单的例子：

.parent{
      position: relative;
}
.child{
      position: absolute;
      top: 20px;
      left: 20px;
}

在上面的例子中，.parent元素设置了position:relative，它的子元素.child设置了position:absolute。这时，.child的定位是相对于父元素.parent的，设置了top和left属性，让它距离父元素的左上角20px。这就使得元素.child相对于父元素移动了位置。若想让元素垂直居中，可以添加transform属性，如下：

.child{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

上面的代码中，我们将.vertical-center元素的top和left属性设置为50%，表示该元素应该距离其父元素上下和左右分别50%的位置。若直接这样设置会使其顶部和左侧距离父元素边缘的距离分别为元素宽度和高度的50%，所以我们使用transform属性来使元素垂直居中。

当页面需要实现高度自适应的布局时，可以使用盒模型的属性，如height:100%或者max-height:100vh。同时，要将父元素和子元素都设置成高度自适应。下面是一个例子：

.parent{
      height: 100vh;
}
.child{
      height: 100%;
}
    

在上面的例子中，.parent元素被设置了100vh的高度，它的子元素.child设置了height属性的值为100%，表示该元素的高度将自动适应其父元素的高度。这时，子元素的高度将自动被拉伸以适应.box-container的高度。

以上就是关于CSS绝对定位和高度自适应的简介，希望本文对你有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！