前端定位

最新推荐文章于 2023-12-25 17:00:00 发布

sun_qqq

最新推荐文章于 2023-12-25 17:00:00 发布

阅读量218

点赞数

分类专栏：前端开发文章标签： html+css 前端样式 html 水平居中 position

本文链接：https://blog.csdn.net/sun_qqq/article/details/83305585

版权

前端开发专栏收录该内容

27 篇文章 19 订阅

订阅专栏

1.父级元素设置relative，子级元素设置absolute，宽度设一个固定长度。如何让子级元素水平居中？
子级元素设置margin:0 auto,left:0,right:0
2.父级元素设置relative，子级元素设置absolute，如何使子级元素宽度和父级宽度一样？
子级元素设置width:100%。
3.做一个浮层，浮在整个文档上面。
用absolute只能占据一屏，用fixed才能覆盖整个文档

position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
opacity: .5;
background-color: #000;position: fixed;
top:0;
left: 0;
bottom: 0;
right: 0;
z-index: 1000;
opacity: .5;
background-color: #000;

4.实现弹框水平、垂直居中。参考https://www.cnblogs.com/ada-blog/p/7242664.html

<div style="position: fixed;top: 0;bottom: 0;left:0;right:0;">
	<div class="WriteMessageFrame"></div>
</div>
	
.WriteMessageFrame {
    background-color: @fore_color;
    width: 42rem;
    height: 10rem;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom: 0;
}