css 如何将一个div叠加到另一个div上

n53p2ov0 于 2022-12-20 发布在其他

关注(0)|答案(9)|浏览(303)

我需要帮助将一个div覆盖到另一个div上。
我的代码如下所示：

<div class="navi"></div>
<div id="infoi">
    <img src="info_icon2.png" height="20" width="32"/>
</div>

不幸的是，我不能将div#infoi或img嵌套在第一个div.navi中。
它必须是两个独立的div，如图所示，但我需要知道如何将div#infoi放置在div.navi上，并放置在div.navi的最右侧和顶部中心。

css

来源：https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div

9条答案

按热度按时间

ryevplcw1#

#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div>

我建议学习position: relative和position: absolute的子元素。

赞(0）回复(0）举报 2022-12-20

kxxlusnw2#

公认的解决方案效果很好，但IMO缺乏解释为什么它能起作用。下面的例子归结为基础，并将重要的CSS与不相关的样式CSS分开。作为奖励，我还包括了CSS定位如何工作的详细解释。

- TLDR;如果您只需要代码，请向下滚动到The Result**。

问题
有两个独立的同级元素，目标是定位第二个元素（id为infoi），使其出现在前一个元素（class为navi的元素）中。

拟定解决方案

为了达到预期的结果，我们将移动或定位第二个元素（我们称之为#infoi），使其出现在第一个元素（我们称之为.navi）中，具体来说，我们希望#infoi位于.navi的右上角。

CSS职位所需知识

CSS有几个属性来定位元素。默认情况下，所有元素都是position: static。这意味着元素将根据它在HTML结构中的顺序来定位，只有少数例外。
其他position值为relative、absolute、sticky和fixed。通过将元素的position设置为这些其他值之一，现在可以使用以下四个属性的组合来定位元素：

top
right
bottom
left

换句话说，通过设置position: absolute，我们可以添加top: 100px，使元素位于距页面顶部100像素的位置;相反，如果设置bottom: 100px，元素将位于距页面底部100像素的位置。

这里是许多CSS新手迷失的地方-position: absolute有一个参考框架。在上面的例子中，参考框架是body元素。position: absolute与top: 100px意味着元素的位置距离body元素的顶部100像素。

位置参照系或位置上下文可以通过将父元素的position设置为***position: static***以外的任何值来改变。也就是说，我们可以通过给定父元素来创建一个新的位置上下文：

position: relative;
x1米30英寸1x
position: sticky;
position: fixed;

例如，如果为<div class="parent">元素指定了position: relative，则任何子元素都将使用<div class="parent">作为其位置上下文。如果为子元素指定了position: absolute和top: 100px，则该元素将定位在距离<div class="parent">元素顶部100个像素的位置，因为<div class="parent">现在是位置上下文。

- 需要注意的另一个因素是堆栈顺序**-即元素在z方向上的堆栈方式。这里必须知道的是，默认情况下，元素的堆栈顺序与它们在HTML结构中的顺序相反。请考虑以下示例：

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

在此示例中，如果两个<div>元素位于页面上的同一位置，则<div>Top</div>元素将覆盖<div>Bottom</div>元素。由于<div>Top</div>在HTML结构中位于<div>Bottom</div>之后，因此它具有较高的堆叠顺序。
x一个一个一个一个x一个一个二个x
堆叠顺序可以通过CSS使用z-index或order属性进行更改。
在这个问题中，我们可以忽略堆叠顺序，因为元素的自然HTML结构意味着我们希望在top上显示的元素在另一个元素之后。
所以，回到手头的问题--我们将使用位置上下文来解决这个问题。

解决方案

如上所述，我们的目标是定位#infoi元素，使其出现在.navi元素中。为此，我们将把.navi和#infoi元素 Package 在一个新元素<div class="wrapper">中，以便创建一个新的位置上下文。

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi"></div>
</div>

然后通过为.wrapper指定position: relative来创建新的位置上下文。

.wrapper {
  position: relative;
}

有了这个新的位置上下文，我们可以将#infoi定位在.wrapper中。首先，给#infoi一个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;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

备用（网格）解决方案

这里有一个替代的解决方案，使用CSS Grid将.navi元素与#infoi元素放在最右边，我使用了详细的grid属性来使它尽可能清晰。

:root {
  --columns: 12;
}

/*
*  Setup the wrapper as a Grid element, with 12 columns, 1 row
*/
.wrapper {
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: 40px;
}

/*
*  Position the .navi element to span all columns
*/
.navi {
  grid-column-start: 1;
  grid-column-end: span var(--columns);
  grid-row-start: 1;
  grid-row-end: 2;
  
  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  background-color: #eaeaea;
}


/*
*  Position the #infoi element in the last column, and center it
*/
#infoi {
  grid-column-start: var(--columns);
  grid-column-end: span 1;
  grid-row-start: 1;
  place-self: center;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

备用（无 Package 器）解决方案

在我们不能编辑任何HTML的情况下，这意味着我们不能添加 Package 器元素，我们仍然可以达到预期的效果。

在#infoi元素上不使用position: absolute，而是使用position: relative，这允许我们将#infoi元素从默认位置重新定位到.navi元素下面，对于position: relative，我们可以使用负的top值将其从默认位置上移。以及使用left: calc(100% - 52px)将100%减去几个像素的left值定位在右侧附近。

/*
*  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;
}

<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>

赞(0）回复(0）举报 2022-12-20

cedebl8k3#

新的Grid CSS规范提供了一个更优雅的解决方案。使用position: absolute可能会导致重叠或缩放问题，而Grid将使您免于肮脏的CSS黑客攻击。
最小网格覆盖示例：

HTML格式 *

<div class="container">
  <div class="content">This is the content</div>
  <div class="overlay">Overlay - must be placed after content in the HTML</div>
</div>

中央支助组 *

.container {
  display: grid;
}

.content, .overlay {
  grid-area: 1 / 1;
}

就是这样。如果你不为InternetExplorer构建，你的代码很可能会工作。

赞(0）回复(0）举报 2022-12-20

jqjz2hbq4#

通过使用带有z-index:1;和position: absolute;样式的div，您可以将您的div覆盖在任何其他div上。
z-index确定div“堆栈”的顺序。z-index值较高的div将出现在z-index值较低的div之前。请注意，此属性仅适用于定位元素。

赞(0）回复(0）举报 2022-12-20

sg3maiej5#

您需要添加一个具有`relative position`的父项，在此父项中，您可以设置div的`absolute position`

<div> <------Relative
  <div/> <------Absolute
  <div/> <------Absolute
  <div/> <------Absolute
<div/>

最终结果：

https://codepen.io/hiteshsahu/pen/XWKYEYb?editors=0100

<div class="container">
  <div class="header">TOP: I am at Top & above of body container</div>
  
    <div class="center">CENTER: I am at Top & in Center of body container</div>
  
  <div class="footer">BOTTOM: I am at Bottom & above of body container</div>
</div>

设置HTML正文全角

html, body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

然后，可以设置div的相对位置，使其具有完整的宽度和高度

.container {
  position: relative;
  background-color: blue;
  height: 100%;
  width: 100%;
  border:1px solid;
  color: white;
  background-image: url("https://images.pexels.com/photos/5591663/pexels-photo-5591663.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: #cccccc;
}

在相对位置的div中，您可以放置绝对位置的div

在容器上方顶部

.header {
  position: absolute;
  margin-top: -10px;
  background-color: #d81b60 ;
  left:0;
  right:0;
  margin:15px;
  padding:10px;
  font-size: large;
}

在容器上方的底部

.footer {
  position: absolute;
  background-color: #00bfa5;
  left:0;
  right:0;
  bottom:0;
  margin:15px;
  padding:10px;
  color: white;
  font-size: large;

}

在集装箱上方的中央

.center {
  position: absolute;
  background-color: #00bfa5;
  left:  30%;
  right: 30%;
  bottom:30%;
  top: 30%;
  margin:10px;
  padding:10px;
  color: white;
  font-size: large;
}

赞(0）回复(0）举报 2022-12-20

jaxagkaj6#

下面是一个100%基于CSS的简单解决方案。"秘密"是在 Package 器元素中使用display: inline-block。图像中的vertical-align: bottom是一个黑客攻击，以克服一些浏览器在元素后添加的4px填充。

- 建议**：如果 Package 器之前的元素是内联的，它们最终可能会嵌套。在这种情况下，你可以用display: block--通常是一个好的和旧的div--将 Package 器" Package "在一个容器内。

.wrapper {
    display: inline-block;
    position: relative;
}

.hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 188, 212, 0);
    transition: background-color 0.5s;
}

.hover:hover {
    background-color: rgba(0, 188, 212, 0.8);
    // You can tweak with other background properties too (ie: background-image)...
}

img {
    vertical-align: bottom;
}

<div class="wrapper">
    <div class="hover"></div>
    <img src="http://placehold.it/450x250" />
</div>

赞(0）回复(0）举报 2022-12-20

fjaof16o7#

这就是你所需要的：

function showFrontLayer() {
  document.getElementById('bg_mask').style.visibility='visible';
  document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
  document.getElementById('bg_mask').style.visibility='hidden';
  document.getElementById('frontlayer').style.visibility='hidden';
}

#bg_mask {
  position: absolute;
  top: 0;
  right: 0;  bottom: 0;
  left: 0;
  margin: auto;
  margin-top: 0px;
  width: 981px;
  height: 610px;
  background : url("img_dot_white.jpg") center;
  z-index: 0;
  visibility: hidden;
} 

#frontlayer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 70px 140px 175px 140px;
  padding : 30px;
  width: 700px;
  height: 400px;
  background-color: orange;
  visibility: hidden;
  border: 1px solid black;
  z-index: 1;
} 


</style>

<html>
  <head>
    <META HTTP-EQUIV="EXPIRES" CONTENT="-1" />

  </head>
  <body>
    <form action="test.html">
      <div id="baselayer">

        <input type="text" value="testing text"/>
        <input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>

        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
        <div id="bg_mask">
          <div id="frontlayer"><br/><br/>
            Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
            Use position: absolute to get the one div on top of another div.<br/><br/><br/>
            The bg_mask div is between baselayer and front layer.<br/><br/><br/>
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>

赞(0）回复(0）举报 2022-12-20

yws3nbqq8#

我不是一个很好的程序员，也不是CSSMaven，但我仍然在我的网页设计中使用你的想法。我也尝试过不同的解决方案：

#wrapper {
  margin: 0 auto;
  width: 901px;
  height: 100%;
  background-color: #f7f7f7;
  background-image: url(images/wrapperback.gif);
  color: #000;
}
#header {
  float: left;
  width: 100.00%;
  height: 122px;
  background-color: #00314e;
  background-image: url(images/header.jpg);
  color: #fff;
}
#menu {
  float: left;
  padding-top: 20px;
  margin-left: 495px;
  width: 390px;
  color: #f1f1f1;
}

<div id="wrapper">
  <div id="header">
    <div id="menu">
      menu will go here
    </div>
  </div>
</div>

当然，它们都有一个 Package 器。你可以控制菜单div的位置，它将显示在标题div中，左边距和顶部位置。如果你喜欢，你也可以设置菜单div向右浮动。

赞(0）回复(0）举报 2022-12-20

bf1o4zei9#

下面是一个简单的例子，通过加载图标在另一个div上产生叠加效果。

<style>
    #overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
        background-size: 50px;
        z-index: 1;
        opacity: .6;
    }
    .wraper{
        position: relative;
        width:400px;  /* Just for testing, remove width and height if you have content inside this div */
        height:500px; /* Remove this if you have content inside */
    }
</style>

<h2>The overlay tester</h2>
<div class="wraper">
    <div id="overlay"></div>
    <h3>Apply the overlay over this div</h3>
</div>

在这里试试：http://jsbin.com/fotozolucu/edit?html,css,output

赞(0）回复(0）举报 2022-12-20

我来回答

css 如何将一个div叠加到另一个div上

9条答案

拟定解决方案

CSS职位所需知识

解决方案

结果

备用（网格）解决方案

备用（无 Package 器）解决方案

您需要添加一个具有`relative position`的父项，在此父项中，您可以设置div的`absolute position`

相关问题

热门标签

最新问答

css 如何将一个div叠加到另一个div上

9条答案

拟定解决方案

CSS职位所需知识

解决方案

结果

备用（网格）解决方案

备用（无 Package 器）解决方案

您需要添加一个具有relative position的父项，在此父项中，您可以设置div的absolute position

相关问题

热门标签

最新问答

您需要添加一个具有`relative position`的父项，在此父项中，您可以设置div的`absolute position`