html怎么让两个div重叠,如何将一个div与另一个div重叠
接受的解决办法效果很好，但国际海事组织对其为何有效缺乏解释。下面的示例可以归结为基本的内容，并将重要的CSS与不相关的样式CSS区分开来。另外，我还详细解释了CSS定位是如何工作的。
TLDR；如果您只想要代码，请向下滚动到结果.
问题
有两个独立的同级元素，目标是定位第二个元素(使用id的infoi)，因此它出现在前面的元素(带有class的navi)。无法更改HTML结构。
拟议解决方案
为了达到预期的结果，我们将移动，或定位，第二个元素，我们将称之为#infoi因此，它出现在第一个元素中，我们将称之为.navi..具体来说，我们想#infoi的右上角.navi.
CSS职位所需知识
CSS有几个用于定位元素的属性。默认情况下，所有元素都是position: static..这意味着元素将按照其在HTML结构中的顺序进行定位，很少有例外。
另一个position值是relative, absolute，和fixed..通过设置元素的position对于这3个值中的一个，现在可以使用以下4个属性的组合来定位元素：top
right
bottom
left
换句话说，通过设置position: absolute，我们可以添加top: 100px若要从页面顶部定位元素100 px，请执行以下操作。相反，如果我们bottom: 100px元素将从页面底部定位为100 px。
这里是许多CSS新手迷路的地方 - position: absolute有一个参照系。在上面的示例中，参考框架是body元素。position: absolute带着top: 100px表示元素被定位。100px从顶部body元素。
可以通过设置position的父元素的除position: static..也就是说，我们可以通过提供一个父元素来创建一个新的职位上下文：position: absolute;
position: relative;
position: fixed;
例如，如果
另一个因素意识到IS堆栈顺序-或者元素是如何在z方向堆放的。这里必须知道的是元素的堆栈顺序，默认情况下，元素的顺序是由HTML结构中元素顺序的反向定义的。考虑以下示例：
在这个例子中，如果两个
元素将覆盖
元素。自
后来居上
在HTML结构中，它具有较高的堆叠顺序。div {
position: absolute;
width: 50%;
height: 50%;}#bottom {
top: 0;
left: 0;
background-color: blue;}#top {
top: 25%;
left: 25%;
background-color: red;}
可以使用css使用z-index或order财产。
我们可以忽略这个问题中的堆叠顺序，因为元素的自然HTML结构意味着我们想要出现的元素top在另一个元素之后。
所以，回到手头的问题-我们将使用位置上下文来解决这个问题。
解
如上所述，我们的目标是将#infoi元素中的.navi元素。为此，我们将包装.navi和#infoi新元素中的元素
然后通过以下方式创建一个新的职位上下文.wrapper a position: relative..wrapper {
position: relative;}
有了这个新的职位上下文，我们可以定位#infoi内.wrapper..首先，给#infoi a position: absolute，允许我们定位#infoi绝对在.wrapper.
然后添加top: 0和right: 0若要将#infoi元素位于右上角。记住，因为#infoi元素正在使用.wrapper作为其位置上下文，它将位于.wrapper元素。#infoi {
position: absolute;
top: 0;
right: 0;}
因为.wrapper只是一个容器.navi，定位#infoi在右上角.wrapper的右上角的效果。.navi.
我们得到了它，#infoi的右上角.navi.
结果
下面的示例可以归结为基本的内容，并包含一些最小的样式。/*
* position: relative gives a new position context
*/.wrapper {
position: relative;}/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/.navi {
background-color: #eaeaea;
height: 40px;}/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/#infoi {
position: absolute;
top: 0;
right: 0;
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;}
备用(无包装)解决方案
在这种情况下，我们不能编辑任何HTML，这意味着我们不能添加一个包装元素，我们仍然可以达到预期的效果。
而不是使用position: absolute在#infoi元素，我们将使用position: relative..这允许我们重新定位#infoi元素的默认位置。.navi元素。带着position: relative我们可以用否定词top值将其从默认位置向上移动，并且left价值100%减去几个像素，使用left: calc(100% - 52px)把它定位在右边。/*
* The .navi properties are for styling only
* These properties can be changed or removed
*/.navi {
background-color: #eaeaea;
height: 40px;
width: 100%;}/*
* Position the #infoi element in the top-right
* of the .wrapper element
*/#infoi {
position: relative;
display: inline-block;
top: -40px;
left: calc(100% - 52px);
/*
* Styling only, the below can be changed or removed
* depending on your use case
*/
height: 20px;
padding: 10px 10px;}
html怎么让两个div重叠,如何将一个div与另一个div重叠相关推荐
- html div左中右布局,求助css。 一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
- html 特效隐藏div,如何实现用css3显示隐藏一个div特效
这篇文章主要介绍了关于如何实现用css3显示隐藏一个div特效,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 显示隐藏一个p特效的方法有很多,下为大家介绍下使用纯css3是如何实现的, ...
- html toggle自动隐藏,Javascript / HTML – 切换可见性(当另一个div元素呈现可见时自动导致一个div元素隐藏)...
基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性. 我遇到的问题是:假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点 ...
- html动态显示隐藏div,div隐藏与显示属性 怎么让一个div显示一个div隐藏
怎么让一个div显示一个div隐藏 总是显示 js控制div显示与隐藏,js利用"hover"属性 1.首先样式要设定好,在每个li区域只能显示a或者b. 2.引入js库代码(jq ...
- 多个DIV横向排列，如何让最后一个DIV充满右侧剩余屏幕
左边的DIV设定了固定的宽度,右边的DIV如何自适应地填满剩下的屏幕宽度? 浅谈CSS3中display属性的Flex布局
- div显示在上层_怎样设置一个DIV在所有层的最上层，最上层DIV
展开全部 1.一般嵌套在内层标签的在上层.按排版,后插入的标签在上层. 2.当用position定位后的元素,可以用z-index来设62616964757a686964616fe78988e69d8 ...
- html图片div定位左下角,CSS – 在左下角放置一个div
要相对于"视口"(它所在的窗口或框架)定位一个元素,并且忽略该视口如何滚动,您可以使用position:fixed;物业价值( MDN documentation).自Intern ...
- html5 居于页面中心,css笔记：如何让一个div居于页面正中间
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果 ...
- 将div垂直居中放置在另一个div中[重复]
本文翻译自:Vertically centering a div inside another div [duplicate] This question already has answers he ...
- html两个div浮动后下一个div怎么换行的问题
欢迎访问我的个人博客:机器学习之路 刚开始学习网页前端,不懂得问题挺多,总在网上查找相关知识点,但是东西一旦多了就特别难记全了,今天又查东西突然发现别人都是查完以后把东西写一遍文章记下来 ...
最新文章
- linux shell 命令执行超时终止
- 精通Hibernate：通过Hibernate操纵对象
- .Net程序调试与追踪的一些方法
- 数学的威力有多大？足以震慑全球......
- eclipse怎么显示代码行数
- Pythonipython安装注意事项
- ASP.NET的錯誤類型及錯誤處理方式
- Exchange2010 owa 访问 http 500 内部服务器错误
- spring5.0学习笔记3
- 黑马程序员——农夫过河问题
- mysql 并发锁_MySQL的并发控制与加锁分析
- idc机房运维巡检_IDC机房运维心得
- awr报告 解读_Oracle Awr报告_awr报告解读_基础简要信息
- IOS 10 适配系列 _3_ Xcode 8 GM seed
- Hadoop集群搭建及测试
- k2450 linux 显卡驱动,Debian系统安装NVIDIA驱动支持双显卡切换
- Java实现系统统一对外开放网关入口设计
- 360极速模式版本，出现已经取消网页导航现象，怎么解决呢？
- linux进阶52——pthread_cond_t
- Java基础语法之变量、运算符、流程控制、数组和方法等基础语法