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 ...
随机推荐
- git下载fastadmin
mac git下载后,环境配置运行会如下图 一 下载相对应系统的node.js https://nodejs.org/en/download/ 安装就是一直下一步.... 二 指令终端.cd 到对应项 ...
- hearthbuddy中的Class276
构造函数 需要注意的是this.intptr_0 = this.method_18("mono.dll"); 所以,这个类里面的操作,最后是和mono.dll相关的 interna ...
- k8s环境部署(一)
环境介绍 1.单masrer节点 (安装下面图中介绍的四个组件) 2.俩个node节点(安装kubelet和docker) 3.为了支持master与node之前的通信,我们还需要在master上安装 ...
- ambari部署Hadoop集群(1)
本例使用hortonworks 提供了 ambari 的安装方法,而且还很详细.以下是在 centos7 上的安装步骤. 基础配置: 1. 修改电脑的主机名 hostnamectl set-hostn ...
- react native tap切换页面卡顿
问题描述:做一个页面,左边是导航,每次点击一个菜单,右边立即显示出对应的视图,数据会重新过滤,使用setState 更新视图,会卡顿 解决办法: InteractionManager.runAfter ...
- Sql UpdateOrInsert
SqlServer(先更新,受影响条数为0,则Insert,通过事务): begin tran update table set column=columnvalue where wherestr b ...
- Pythoncookbook(数据结构与算法)在字典中将键映射到多个值上的方法
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法 本文实例讲述了Python在字典中将键映射到多个值上的方法.分享给大家供大家参考,具体如下: 问题:一个能将键(key ...
- MongoDB数据节点基础操作
1.查看集群中各节点的状态: rs0:PRIMARY> rs.status() 2.查看集群中各节点配置情况: rs0:PRIMARY> rs.conf() 3.主节点降级为从节点: rs ...
- app测试自动化之测试套框架构造之公共部分以及测试用例导包二
封装的公共部分:commonfrom time import sleepdef com(dr): #点击backup dr.find_element_by_android_uiautomator\ ( ...
- linux如何使用QQmail实现网络邮件报警?
环境:CentOS7 目的:考虑到实现服务的高可用性.使用电子邮件通知服务,可以快速的通知维护人员.提高服务的可靠性,而通过 smtp.qq.com 实现脚本邮件报警 一.设置并取得 smtp.qq. ...