登陆      注册    找回密码   会员投稿 宽屏版 I 换肤 手机版 | 收藏本站   当前时间是: 
首页>技术文档>html5/cs3前端>正文


html怎么让两个div重叠,如何将一个div与另一个div重叠

来源:互联网   作者:佚名   浏览:91次   发表时间:2022-5-17 23:08:11
【字体: 视力保护色:

接受的解决办法效果很好,但国际海事组织对其为何有效缺乏解释。下面的示例可以归结为基本的内容,并将重要的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;

例如,如果

元素给出position: relative,任何子元素都会使用
作为他们的立场背景。如果给出一个子元素position: absolute和top: 100px元素的位置为100 px。
元素,因为
现在是职位上下文。
另一个因素意识到IS堆栈顺序-或者元素是如何在z方向堆放的。这里必须知道的是元素的堆栈顺序,默认情况下,元素的顺序是由HTML结构中元素顺序的反向定义的。考虑以下示例:

Bottom
Top
在这个例子中,如果两个

元素位于页面上相同的位置,
Top
元素将覆盖
Bottom
元素。自
Top
后来居上
Bottom
在HTML结构中,它具有较高的堆叠顺序。div {
position: absolute;

width: 50%;

height: 50%;}#bottom {
top: 0;

left: 0;

background-color: blue;}#top {
top: 25%;

left: 25%;

background-color: red;}

Bottom
Top
可以使用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;}

董为坚个人网 https://www.dwjgrw.cn/ 【关闭窗口
注:转载或者复制本站文章,必须带上董为坚个人网链接。
部分文章来源于网络,如有侵权联系删除!
扫一扫在手机阅读

扫一扫 在手机阅读、分享本文


上一篇:晒婚纱照的朋友圈怎么发 婚纱照文案短句干净
下一篇:惜叹流年无常在,记忆回首已成空

版权所有:《董为坚个人网
本文地址:https://www.dwjgrw.cn/Content/id/148.html   复制地址
本站内容除特别注明外,均为《董为坚个人网》原创,欢迎转载!转载请注明本文地址,谢谢!


  评论列表

暂无评论

  发表评论 [评论会通过邮件和短信的形式通知我,我会及时回复,一定回来看哦!!!]
昵称: [必填]
邮箱: [必填]
内容: [必填]
验证码:   
                     
给我留言 申请友链Copyright © 2012- 董为坚个人网, All rights reserved 手机版
本站已正常运行3310天技术顾问:董为坚个人网 ( 桂ICP备15004478号-1 )
  今日更新:0篇, 最后更新:2022-6-30联系QQ1115030108,邮箱:1115030108@qq.com
今日有27人访问,总访问数739076人请勿发布违反中华人民共和国法律法规的言论.