前言
有时候,我们需要如下图这样一个悬浮效果需求:
实现
在标准的正常的情况下,只能使用 绝对定位
来完成。
第一步:父容器定位设置为 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让子容器超出父元素(子容器悬浮在父容器效果)的文章就介绍到这了,更多相关CSS子容器超出父元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
前言 当页面的html结构嵌套的盒子很多的时候,可能会导致一个页面中含有多个垂直...
一般情况下,在Dreamweaver中按空格键只能打出一个空格,如何才能连续打多个空格...
Dreamweaver怎么设置标尺的单位,我们用Dreamweaver里面的标尺工具,他的单位有...
用了layui框架 1.home.html主界面: !DOCTYPE htmlhtml head meta charset=UTF-8...
前言 众所周知,在前端开发领域中,函数是一等公民,由此可见函数的重要性,本文...
经历了两天不懈努力,终于恢复了一次误操作删除的生产服务器数据。 对本次事故过...
head标签学习 网页标题标签 titleHTML学习/title !-- 告诉浏览器我们需要什么标...
PSD转div css网页切图示例 第一步:先把把所有标记归置内外边距归置为0,其实还有...
CSS中background的属性值 background-color background-image background-repeat...
概述 最近由于一些原因需要升级 spring boot 版本,项目原来的版本是 spring boo...