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;
例如，如果
元素給出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;}
??
總結
以上是生活随笔為你收集整理的html怎么让两个div重叠,如何将一个div与另一个div重叠的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： perf常用命令（perf top pe
- 下一篇： 搭配emuc-b202 can卡通讯时，