CSS让子容器超出父元素（子容器悬浮在父容器效果）

前言

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

实现

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

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

<div id="a"><div id="b">我要浮出去！</div>
</div>

#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让子容器超出父元素（子容器悬浮在父容器效果）相关推荐

js获取对象的父元素,子元素,兄弟元素
今天测试我昨天写好的js插件,发现昨天考虑欠妥,导致[修改]做不了了!主要原因是我以前都是遍历表格,在每条记录后面添加修改按钮.现在用局部刷新表格的方法,每次都自动生成表格内容,以致于无法在记录后面生 ...
js margin作用到父元素_CSS中margin-top对父级元素产生作用的问题
在页面重构中,利用margin进行定位非常常见,然而margin-top这个属性经常会给我们带来一定的困扰,有时候不起作用,还把父层"拉"了下来,如图所示: 代码如下: test2 ...
html 父元素右下角,html – 如何在父元素和父元素的兄弟元素上显示子元素？
我的问题与这个问题有关: 对该问题的回答,设置溢出:可见,仅适用于一个孩子的一个父母.但是,我有这些元素的行;父母的行,我需要孩子在父母身上显示.我可以让孩子显示原来的父母,但我不能让孩子显示父母的兄 ...
vue 父刷新子_vue.js从父级中更新子组件数据
如何从父组件中更新子组件中的数据?我正在尝试从父级中更新autores属性,并让它更新子级数据.目前什么都没有发生,我认为我没有正确的数据链接.如果我将它作为数据添加到父组件中,那么当代码运行时,父组 ...
父与子一起学python3,父与子的编程之旅与小卡特一起学Python 第3版（全彩印刷）...
章出发吧 1 1.1 安装Python 1 1.2 从IDLE启动Python 2 1.3 来点指令吧 3 1.4 与Python交互 5 1.5 该编程了 7 1.6 运行你的个程序 9 1.7 ...
父与子的编程python_父与子的编程之旅：与小卡特一起学Python
领取成功您已领取成功! 您可以进入Android/iOS/Kindle平台的多看阅读客户端,刷新个人中心的已购列表,即可下载图书,享受精品阅读时光啦! - | 回复不要太快哦~ 回复内容不能为空哦 ...
html超出父元素,css怎么让元素超出父元素
css让元素超出父元素的实现方法:1.将父容器定位设置为"relative",表示相对定位:2.将子容器定位设置为"absolute",表示绝对定位. 本文操作 ...
css笔记（选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影）
##css(Cascading Style Sheet) 1.样式引入行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
html 相对于父标签位置,css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...

CSS让子容器超出父元素（子容器悬浮在父容器效果）

前言

实现

CSS让子容器超出父元素（子容器悬浮在父容器效果）相关推荐

最新文章

热门文章