当父级容器内的子元素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. Brute-Force-Attack on Triple-DES with Reduced Key Space

    题目地址:https://www.mysterytwisterc3.org/en/challenges/level-ii/brute-force-attack-on-triple-des-with-r ...

  2. Spring入门第二十课

    返回通知,异常通知,环绕通知 看代码: package logan.study.aop.impl; public interface ArithmeticCalculator { int add(in ...

  3. AngularJS 2.0 学习

    前提: 下载和安装node.js 和 npm. https://nodejs.org/en/download/ npm安装 需要自己google 安装好之后,可以在cmd窗口中查看安装的版本 node ...

  4. c# sleep 例子-线程挂起

    using System; using System.Threading; public class arr { public static void Main() { //int[] arr; // ...

  5. 当Python中混进一只薛定谔的猫……

    本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/-fFVTgWVsydFsNu1nyxUzA Python 是一门强大的 ...

  6. UIPI VS与Win7 共舞:用户界面特权隔离

    http://tech.it168.com/a2009/0924/737/000000737968.shtml [IT168 专稿]在上文中,我们介绍了操作系统服务的Session 0隔离,通过Ses ...

  7. 51nod1101(dp)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1101 题意:中文题诶- 思路:dp 我们用dp[i][j]存 ...

  8. solidity 学习笔记(7)内联汇编

    为什么要有内联汇编? //普通循环和内敛汇编循环比较 pragma solidity ^0.4.25; contract Assembly{ function nativeLoop() public ...

  9. birt启动后访问地址详解

    发布设计完成的报表文件,可在web项目中创建reports目录,用于存放报表设计文件. 在应用中通过正确格式的访问路径,例如:http://localhost:8080/birtApp/framese ...

  10. os.walk详解

    https://www.jianshu.com/p/bbad16822eab python中os.walk是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 1.载入 要使 ...