概述
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
CSS让子容器超出父元素(子容器悬浮在父容器效果)
前言
有时候,我们需要如下图这样一个悬浮效果需求:
实现
在标准的正常的情况下,只能使用 绝对定位
来完成。
第一步:父容器定位设置为 relative(相对定位)。
第二步:子容器定位设置为 absolute(绝对定位)。
<p id="a">
<p id="b">我要浮出去!</p></p>
登录后复制
#a{
width:400px;
height:100px;
background:rgb(0, 0, 0);
position:relative;/*父元素>相对定位*/}#b{
width: 150px;
height:50px;
background:rgb(185, 155, 255);
position:absolute;/*子元素>绝对定位*/
top:-30px;/*控制浮出*/
/* left:XX; */}
登录后复制
效果图:
【推荐学习:css视频教程】
父元素设置 绝对定位
,子元素设置 相对定位
,即子元素依照父元素进行定位。
以上就是css怎么让元素超出父元素的详细内容,更多请关注靠谱客其它相关文章!
最后
以上就是害羞鸡为你收集整理的css怎么让元素超出父元素的全部内容,希望文章能够帮你解决css怎么让元素超出父元素所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复