当父级容器内的子元素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%与绝对定位同时存在,偏移出父级容器的更多相关文章

  1. css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

  2. css中width:auto和width:100%的区别是什么

    width的值一般是这样设置的: 1,width:50px://宽度设为50px 2,width:50%://宽度设为父类宽度的50% 3,还有一个值是auto(默认值),宽度是自动的,随着内容的增加 ...

  3. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  4. 深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  5. 深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

    深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.o ...

  6. javascript好文---深入理解定位父级offsetParent及偏移大小

    前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWid ...

  7. [转]深入理解定位父级offsetParent及偏移大小

    偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个 ...

  8. width:100%和width:inherit

    前几天遇到过这么一个问题.我想让子盒子的宽度等于父盒子的宽度.父盒子宽度为一个具体值比如说200px.我将子盒子宽度设为了100%.按道理说应该是可以等于父盒子的宽度的,但结果并没有,而是通栏了.然后 ...

  9. 多方法解决设置width:100%再设置margin或padding溢出的问题

    2019独角兽企业重金招聘Python工程师标准>>> 当设置了父元素的宽度,子元素设置宽度为100%后再在加上子元素上添加padding或margin值就会溢出.举个例子: < ...

随机推荐

  1. Biopython常用功能模块

    Biopython项目是旨在减少计算生物学中代码重复的开源项目之一,由国际开发人员协会创建. 它包含表示生物序列和序列注释的类,并且能够读取和写入各种文件格式(FASTA,FASTQ,GenBank和 ...

  2. ARP欺骗(完全版)

    在讲ARP欺骗之前先讲讲什么是ARP以及ARP欺骗的原理吧. 一.  什么是ARP? arp英文全称: address resolution  protocol   中文:地址解析协议 它的作用:是根 ...

  3. 6. webshell文件上传分析溯源

    这道题也是借助大佬的帮助才成功,具体我们来看: 既然人家扫描发现后台目录有文件上传,我们也不能落后,顺便拿出了传说中的御剑,并进行一波扫描: 发现了几个比较有用的目录,特别是upload1.php跟u ...

  4. UVa 11100 The Trip, 2007 (题意+贪心)

    题意:有n个包,其中小包可以装到大的包里,包的大小用数字进行表示,求最小的装包数量. 析:这个题的题意不太好理解,主要是有一句话难懂,意思是让每个最大包里的小包数量的最大值尽量小,所以我们就不能随便输 ...

  5. sqlserver2012——逻辑运算符

    ALL 如果一组的比较都为TRUE,则结果为true ANY如果玉足比较中任何一个为true,则结果为true AND 两个boll都为TRUE,则结果为TRUE OR 两个BOLL任何一个TRUE, ...

  6. apply的使用技巧

    1.什么是apply?他和call有什么区别? apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数 obj:这个对象 ...

  7. jzoj6005. 【PKUWC2019模拟2019.1.17】数学 (生成函数+FFT+抽代+高精)

    题面 题解 幸好咱不是在晚上做的否则咱就不用睡觉了--都什么年代了居然还会出高精的题-- 先考虑如果暴力怎么做,令\(G(x)\)为\(F(n,k)\)的生成函数,那么不难发现\[G^R(x)=\pr ...

  8. GIT使用笔记一:GIT初始化配置

    本人系统环境:centos6.5 下 LNMP centos下git安装很简单sudo yum install gitOK 可先进行git 的全局配置 用户信息 git config --global ...

  9. guacamole的复制粘贴

    一.发送中文或文本(针对开发环境,生产环境不需变动) 官方下载的完整版js缺失了一部分关于粘贴板的代码,调用setclipboard方法,将外部内容复制到粘贴板的时候,提示方法不存在.需要补齐这部分源 ...

  10. win7设置管理员权限

    1.在运行中输入:secpol.msc 2.修改设置权限设置 3.在账户中, 将administrator启用并设置密码 将其他用户取消管理原权限,设置为user权限