width:100%与绝对定位同时存在,偏移出父级容器
当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面
出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个子元素就有多宽,所以子元素跑到了父级容器外
html
<div class="container">
<div class="content">好的</div> </div> css
.container {
position:relative;
width:200px;
height:100px;
background:red;
margin:10px;
padding:10px;
border:5px solid #000; }
.content {
text-align:center;
width:100%;
position:absolute;
left:30px;
right:30px;
background:blue;
}
如何实现子元素看起来在父级容器之内居中显示?其实很简单,把子元素的width:100%改为width:auto即可
效果如下图
题外话:绝对定位是一般是根据其定位父级border内侧开始定位的,若无定位父级则是根据视口边定位
width:100%与绝对定位同时存在,偏移出父级容器的更多相关文章
- css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...
- css中width:auto和width:100%的区别是什么
width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...
- CSS的width:100%和width:auto区别
CSS的width:100%和width:auto区别 一. 问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...
- 深入理解定位父级offsetParent及偏移大小
前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
- 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth
深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...
- javascript好文---深入理解定位父级offsetParent及偏移大小
前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...
- [转]深入理解定位父级offsetParent及偏移大小
偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...
- width:100%和width:inherit
前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...
- 多方法解决设置width:100%再设置margin或padding溢出的问题
2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...
随机推荐
- Biopython常用功能模块
Biopython项目是旨在减少计算生物学中代码重复的开源项目之一,由国际开发人员协会创建. 它包含表示生物序列和序列注释的类,并且能够读取和写入各种文件格式(FASTA,FASTQ,GenBank和 ...
- ARP欺骗(完全版)
在讲ARP欺骗之前先讲讲什么是ARP以及ARP欺骗的原理吧. 一. 什么是ARP? arp英文全称: address resolution protocol 中文:地址解析协议 它的作用:是根 ...
- 6. webshell文件上传分析溯源
这道题也是借助大佬的帮助才成功,具体我们来看: 既然人家扫描发现后台目录有文件上传,我们也不能落后,顺便拿出了传说中的御剑,并进行一波扫描: 发现了几个比较有用的目录,特别是upload1.php跟u ...
- UVa 11100 The Trip, 2007 (题意+贪心)
题意:有n个包,其中小包可以装到大的包里,包的大小用数字进行表示,求最小的装包数量. 析:这个题的题意不太好理解,主要是有一句话难懂,意思是让每个最大包里的小包数量的最大值尽量小,所以我们就不能随便输 ...
- sqlserver2012——逻辑运算符
ALL 如果一组的比较都为TRUE,则结果为true ANY如果玉足比较中任何一个为true,则结果为true AND 两个boll都为TRUE,则结果为TRUE OR 两个BOLL任何一个TRUE, ...
- apply的使用技巧
1.什么是apply?他和call有什么区别? apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj:这个对象 ...
- jzoj6005. 【PKUWC2019模拟2019.1.17】数学 (生成函数+FFT+抽代+高精)
题面 题解 幸好咱不是在晚上做的否则咱就不用睡觉了--都什么年代了居然还会出高精的题-- 先考虑如果暴力怎么做,令\(G(x)\)为\(F(n,k)\)的生成函数,那么不难发现\[G^R(x)=\pr ...
- GIT使用笔记一:GIT初始化配置
本人系统环境:centos6.5 下 LNMP centos下git安装很简单sudo yum install gitOK 可先进行git 的全局配置 用户信息 git config --global ...
- guacamole的复制粘贴
一.发送中文或文本(针对开发环境,生产环境不需变动) 官方下载的完整版js缺失了一部分关于粘贴板的代码,调用setclipboard方法,将外部内容复制到粘贴板的时候,提示方法不存在.需要补齐这部分源 ...
- win7设置管理员权限
1.在运行中输入:secpol.msc 2.修改设置权限设置 3.在账户中, 将administrator启用并设置密码 将其他用户取消管理原权限,设置为user权限