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 ...
随机推荐
- java加密算法相关
简介 RSA公钥加密算法是1977年由罗纳德·李维斯特(Ron Rivest).阿迪·萨莫尔(Adi Shamir)和伦纳德·阿德曼(Leonard Adleman)一起提出的.1987年首次公布,当 ...
- nginx目录及配置语法
一.Nginx安装目录 1.查看安装目录. 采用yum的方式安装,其实都是安装的一个一个的 pm 包,故可采用如下命令查看 rpm -ql nginx 遵循了 rpm 包管理规范. 2.安装目录详解 ...
- Linux 通道
简单地说,一个通道接受一个工具软件的输出,然后把那个输出输入到其它工具软件.使用UNIX/Linux的词汇,这个通道接受了一个过程的标准输出,并把这个标准的输出作为另一个过程的标准输入.如果你没有重新 ...
- 什么叫DMZ区?DMZ区有什么作用?应该怎样构建DMZ
您的公司有一堆电脑,但可以归为两大类:客户机.服务器.所谓客户机就是主动发起连接请求的机器,所谓服务器就是被动响应提供某些服务的机器.服务器又可以分仅供企业内网使用和为外网提供服务两种. 所以,如果把 ...
- 前端使用 fabric 进行部署
概述 前端打包完成之后需要上传到服务器,怎么上传呢?可以先上传到 github,然后在远程服务器上面拉取,最后打包上线.但是这样很麻烦,使用 fabric 可以很简单的一键部署.我根据自己的使用经验, ...
- 阶段3 3.SpringMVC·_05.文件上传_3 文件上传之Springmvc方式上传原理分析
需要配置文件解析器这个对象 id配置时候必须叫做mutipartResolver 最终
- 最短路径:Dijkstra算法 C#
class Program { ; static void Main(string[] args) { Console.WriteLine("各点距离矩阵如下:"); Consol ...
- __getattriute__
# class Foo: # def __init__(self,x): # self.x = x # def __getattr__(self,item): # print("__geta ...
- 【VUE】vue在vue-cli3环境下基于axios解决跨域问题
网上的绝大部分教程解决vue+axios跨域问题都不能直接适用vue-cli3.这是因为vue-cli3不一样的配置方式导致的. 如果是使用vue-cli3构建的项目,那么默认是没有config.js ...
- Spring中用到了哪些设计模式?
谈谈Spring中都用到了哪些设计模式? JDK 中用到了那些设计模式?Spring 中用到了那些设计模式?这两个问题,在面试中比较常见.我在网上搜索了一下关于 Spring 中设计模式的讲解几乎都是 ...