css 两个元素重叠,css元素如何重叠？

css元素重叠的方法：1、给元素设置负margin，负margin可以让元素的占用空间变小，后面的元素可以覆盖当前的元素；2、使用position属性，利用相对定位和绝对定位来让多个元素进行重叠。

本教程操作环境：windows10系统、css3版，该方法适用于所有品牌电脑。

CSS元素的重叠方式：

方法1、设置负margin

给元素设置负margin使其移动后原来的位置是不会保留的

负margin可以让元素的占用空间变小后面的元素可以覆盖当前的元素

(这里有两个相同大小的p 宽高都是100px (如图一) 当我们给上面类名为p的p设置了-margin-bottom之后 (见图二) 我们发现下面的元素覆盖了-margin的位置)

图一:

方法2、利用定位

相对定位(position: relative)：原来位置保留并且不会挤到其他元素，只会重叠

绝对定位(position: absolute)：不保留原来位置脱离页面流

示例：

效果：

更多编程相关知识，请访问：编程学习网站！！

css 两个元素重叠,css元素如何重叠？相关推荐

css两列等高,css 多列等高
多列等高高度不一的列以等高方式布局. 需求设计师说某页面的新闻介绍,由于新闻内容不同导致显示区域的高度不一致,现需要使其高度视觉上保持一致.小加同学觉得必须迅速解决,让设计师妹妹知道我们程序师哥哥 ...
css两列显示,div+css如何控制信息分两列显示?
CSS+DIV教程:.aa25/400.shtmlCSS+DIV 视频教程:.aa25/433.shtml 第一步:规划网站.52css/article.asp?id=175 第二步:创建html模板 ...
css两种颜色叠加,css的叠加颜色
这次给大家造就css的可视颜色,采用css叠加颜色的注意事项有哪些,下面就是实战经验案例,一起来看一下.background: -o-linear-gradient(left, #109afd, #3 ...
css两个冒号什么意思
css两个冒号表示伪元素,如"::selection",伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素. 推荐:<css ...
CSS一个冒号是伪类:用于监控动作、两个冒号是伪元素::用于定位元素
一个冒号两个冒号::: 一个冒号是伪类,两个冒号是伪元素伪类有----:first-child ,:link , :vistited,:hover:,active:focus,:lang用于监控 ...
css三个块元素重叠,CSS盒模型以及如何解决边距重叠问题
1. 对于行内元素 margin-top/margin-bottom对于上下元素无效,margin-left/margin-right有效! 对于相邻的块级元素margin-top和margin-bo ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
css 高度塌陷_css中父元素高度塌陷是什么意思，如何解决？（附代码）
本篇文章给大家带来的内容是关于css中父元素高度塌陷是什么意思,如何解决?,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先得回答什么是父元素高度塌陷: 在文档流中,父元素的高度默 ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...

css 两个元素重叠,css元素如何重叠？

css 两个元素重叠,css元素如何重叠？相关推荐

最新文章

热门文章