首页 > 代码库 > width:100%与绝对定位同时存在,偏移出父级容器
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%与绝对定位同时存在,偏移出父级容器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。