您现在的位置是：网站首页> 编程资料编程资料

CSS让子容器超出父元素(子容器悬浮在父容器效果)css使用flexbox布局容器内多元素水平居中Css浮动元素外层容器高度为0(无高度)的解决方法CSS常见的让元素水平居中显示的方法清除网页浮动CSS的做法CSS教程：彻底弄懂闭合浮动元素

2021-09-03 890人已围观

简介这篇文章主要介绍了CSS让子容器超出父元素(子容器悬浮在父容器效果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

有时候，我们需要如下图这样一个悬浮效果需求：

实现

在标准的正常的情况下，只能使用 绝对定位 来完成。

第一步：父容器定位设置为 relative（相对定位）。

第二步：子容器定位设置为 absolute（绝对定位）。

我要浮出去！

 #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子容器超出父元素内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

上一篇：css3实现小箭头各种图形效果css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

下一篇：div自适应高度自动填充剩余高度div不能自适应高度不能随图片的高度变化拥有最小高度能自适应高度同时全兼容IE、FF的div设置子元素div高度不确定时父div高度如何自适应相邻div实现一个跟着另一个自适应高度示例代码怎样让一个div高度自适应浏览器高度CSS min-height IE6、IE7、FF下DIV自适应高度

您现在的位置是：网站首页> 编程资料编程资料

CSS让子容器超出父元素(子容器悬浮在父容器效果)css使用flexbox布局容器内多元素水平居中Css浮动元素外层容器高度为0(无高度)的解决方法CSS常见的让元素水平居中显示的方法清除网页浮动CSS的做法CSS教程：彻底弄懂闭合浮动元素

相关内容

点击排行

本栏推荐

猜你喜欢