day2-设置position:fixed/absolute无法使用margin:auto调整居中
问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中
html代码如下:
<div class="test">
<div class="m-fixed">
</div>
</div>
css代码:
.test{
height: 200px;
font-size: 14px;
width: 100%;
background-color: #D8BFD8
}
.m-fixed{
position: fixed;
top:;
width: 80%;
background-color: #00FF00;
height: 200px;
margin: auto;
}
效果图:

解决办法:
在子元素设置:left:0;right:0
如果像我一样宽度用的是百分比的话可以直接设置子元素:left:(1-子元素占父元素宽度百分比)/2,我这里是:left:10%
实现效果:

问题导致原因和解决办法实现原理个人还不是很明白,后面搞清楚了以后补上。
day2-设置position:fixed/absolute无法使用margin:auto调整居中的更多相关文章
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
- 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
- margin auto 实现居中,与text-align:center的区别
本文导读:一个元素在水平方向上所占的长度,由width ,padding ,和margin 决定.这些值中,只有width和margin-left,margin-right可以设为auto,text- ...
- 设置position(absolute,fixed)导致flex布局不生效
个人解决办法:将要设置display:flex的dom外面在套一个div,并且设置宽度,就可以了.
- IE6和IE7下绝对定位position:absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
- position为absolute的元素如何实现居中
当给div设置absolute时,该元素已经脱离文档流,呈现浮动状态,只能通过left,top,right,bottom来设置属性,要实现居中有两种方法: 一.css法 <div class=& ...
- margin重叠现象与margin auto自适应居中
上下相邻的(算一种兄弟关系)普通元素,上下边距并非简单的相加,而是取其中最大的边距值:而浮动的盒子边距是相加的:父子div也会发生重叠,并不是bug: <style>#test1{ wid ...
- IE8 margin: auto 无法居中
需要给body元素添加属性 body { text-align: center; width: 100%; } ok,可以正常居中.
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
随机推荐
- redis如何清空当前缓存和所有缓存
Windows环境下使用命令行进行redis缓存清理1.redis安装目录下输入cmd2.redis-cli -p 端口号3.flushdb 清除当前数据库缓存4.flushall 清除 ...
- What happens in an async method
https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/task-asynchronous-pr ...
- layui 表单遇到的小问题
select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*opt ...
- 手动集成 Ironic 裸金属管理服务(Rocky)
目录 文章目录 目录 前文列表 横向扩展裸金属管理服务节点 配置基础设施 安装 Ironic(BareMetal) 安装 Nova Compute(BareMetal) 配置 Neutron 提供 P ...
- JAVA多线程程序ProgressBar2
JAVA多线程程序ProgressBar2 题目简介: 思路分析:与上一篇:JAVA多线程程序ProgressBar类似,本篇避免过于冗杂,所以在此没有给出. 实验代码: import java.aw ...
- keyston报错处理
1.35357端口启动不了 [root@controller conf.d]# openstack project create --domain default \ > --descripti ...
- RazorSQL for Mac如何编辑数据?
RazorSQL 是一个非开源的功能非常强大数据库查询工具.SQL的编辑.数据库管理工具.支持通过 JDBC 和 ODBC 连接超过 29 种的数据库.允许您从一个数据库工具查询,更新,导航和管理所有 ...
- 【HANA系列】SAP HANA查看某一用户最后登录时间及无效连接次数
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA查看某一用户最后 ...
- DOM事件练习 II
select框联动效果 需求:当在textarea中输入内容,点击留言按钮,会添加到浏览器中,最新留言出现在最顶端. <!DOCTYPE html> <html lang=" ...
- 简单场景的类继承、复杂场景的类继承(钻石继承)、super、类的方法
1.python子类调用父类成员有2种方法,分别是普通方法和super方法 class Base(object): #基类的表示方法可以多种,Base(),Base,Base(object),即新式类 ...