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值就会溢出.举个例子: < ...
随机推荐
- STM in Clojure
Transactional memory in Clojure is implemented using Multiversion Concurrency Control protocol http: ...
- 创建Maven项目步骤
(转自:http://blog.csdn.net/chuyuqing/article/details/28879477) 使用eclipse插件创建一个web project 首先创建一个Maven的 ...
- Regex Golf 练习记录
正则表达式的练习网站:https://alf.nu/RegexGolf 共17道题:只能说从第10题开始就很变态了,就是看看答案好了 .Warmup: foo .Anchors: k$ 或 ick$ ...
- 20.Consent Controller Get请求逻辑实现
在这里之前讲的这一块的信息就要登场了 需要通过构造函数把这几个注入进来 县引入这三个命名空间 把这三个注入进来,这就是显示依赖 先通过returnUrl拿到这个Request request拿到后,就 ...
- vc++图像显示
显示资源中的图片 (1)从资源中装入位图 ● 定义位图对象数据成员CBitmap m_Bitmap; ● 调用CBitmap成员函数LoadBitmap(),如m_Bitmap.LoadBitmap( ...
- pure css做的手机页面
<!doctype html> <html> <head> <meta http-equiv="Content-type" content ...
- Git 分支管理 解决冲突
人生不如意之事十之八九,合并分支往往也不是一帆风顺的. 准备新的feature1分支,继续我们的新分支开发: $ git checkout -b feature1 -- 在feature1分支上修改r ...
- linux命令之env和export
1.查看环境变量: env查看所有的环境变量: 使用echo命令查看单个环境变量.例如: echo $PATH 使用set查看所有本地定义的环境变量. unset可以删除指定的环境变量. 2.常用环境 ...
- python中的三元表达式(三目运算符)
python中没有其他语言中的三元表达式,不过有类似的实现方法 其他语言中,例如java的三元表达式是这样 int a = 1; String b = ""; b = a > ...
- 在IDEA中设置页面背景护眼色的方法
在IDEA中设置页面背景护眼色的方法如下: