首页 文章

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

提问于
浏览 次
772

我需要协助将一个人 div 覆盖在另一个人 div 上 .

我的代码如下所示：

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

不幸的是我无法在第一个 div.navi 中嵌套 div#infoi 或 img .

它必须是两个独立的 div ，如图所示，但我需要知道如何将 div#infoi 放在 div.navi 上方和最右侧，并以 div.navi 为中心 .

html css position overlay

7 回答

  • 1039

    我不是一个编程人员，也不是CSS的专家，但我仍然在我的网页设计中使用你的想法 . 我也尝试过不同的分辨率：

    #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>

    当然，两者都会有一个包装器 . 您可以控制菜单div的位置，该位置将显示在带有左边距和顶部位置的 Headers div中 . 如果您愿意，也可以将div菜单设置为向右浮动 . 希望这可以帮助 .

    回复于
  • 19
    #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: absolute 学习 position: relative 和子元素 .

    回复于
  • 19

    通过使用 div 样式 z-index:1; 和 position: absolute; ，您可以将 div 覆盖在任何其他 div 上 .

    z-index 确定div 'stack'的顺序 . 具有较高 z-index 的div将出现在具有较低 z-index 的div前面 . 请注意，此属性 only works with positioned elements .

    回复于
  • 171

    已接受的解决方案效果很好，但IMO缺乏对其工作原理的解释 . 下面的示例归结为基础知识，并将重要的CSS与不相关的样式CSS分开 . 作为奖励，我还详细解释了CSS定位的工作原理 .

    TLDR; 如果您只想要代码，请向下滚动到 The Result .

    问题

    有两个独立的兄弟元素，目标是定位第二个元素（ id 为 infoi ），使其出现在上一个元素（ class 为 navi 的元素）中 . HTML结构无法更改 .

    拟议的解决方案

    为了达到预期的效果，我们将're going to move, or position, the 2nd element, which we' ll调用 #infoi ，使其出现在第一个元素中，我们将其称为 .navi . 具体来说，我们希望 #infoi 位于 .navi 的右上角 .

    CSS职位要求知识

    CSS有几个定位元素的属性 . 默认情况下，所有元素都是 position: static . 这意味着元素将根据HTML结构中的顺序进行定位，几乎没有例外 .

    其他 position 值为 relative ， absolute 和 fixed . 通过将元素的 position 设置为这3个值中的一个，现在可以使用以下4个属性的组合来定位元素：

    • top

    • right

    • bottom

    • left

    换句话说，通过设置 position: absolute ，我们可以添加 top: 100px 来从页面顶部定位元素100px . 相反，如果我们设置 bottom: 100px ，元素将位于距页面底部100px处 .

    Here's where many CSS newcomers get lost - position: absolute 有一个参考框架 . 在上面的示例中，引用框架是 body 元素 . position: absolute with top: 100px 表示元素位于 body 元素顶部 100px .

    可以通过将父元素的 position 设置为 any value other than position: static 来更改引用的位置框架或位置上下文 . 也就是说，我们可以通过给出一个父元素来创建一个新的位置上下文：

    • position: absolute;

    • position: relative;

    • position: fixed;

    例如，如果 <div class="parent"> 元素被赋予 position: relative ，则任何子元素都使用 <div class="parent"> 作为其位置上下文 . 如果子元素被赋予 position: absolute 和 top: 100px ，则元素将位于距离 <div class="parent"> 元素顶部100px处，因为 <div class="parent"> 现在是位置上下文 .

    The other factor 要注意的是 stack order - 或者元素在z方向上的堆叠方式 . 这里必须知道的是，默认情况下，元素的堆栈顺序是由它们在HTML结构中的顺序相反定义的 . 请考虑以下示例：

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

    在此示例中，如果两个 <div> 元素位于页面上的相同位置，则 <div>Top</div> 元素将覆盖 <div>Bottom</div> 元素 . 由于 <div>Top</div> 在HTML结构中位于 <div>Bottom</div> 之后，因此它具有更高的堆叠顺序 .

    div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

    <div id="bottom">Bottom</div>
<div id="top">Top</div>

    可以使用 z-index 或 order 属性使用CSS更改堆叠顺序 .

    我们可以忽略此问题中的堆叠顺序，因为元素的自然HTML结构意味着我们想要在 top 上出现的元素出现在另一个元素之后 .

    所以，回到手头的问题 - 我们将使用位置上下文来解决这个问题 .

    解决方案

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

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

    然后通过给 .wrapper position: relative 创建一个新的位置上下文 .

    .wrapper {
  position: relative;
}

    有了这个新的位置上下文，我们可以在 .wrapper 内定位 #infoi . 首先，给 #infoi a position: absolute ，允许我们在 .wrapper 绝对定位 #infoi .

    然后添加 top: 0 和 right: 0 以将 #infoi 元素放置在右上角 . 请记住，因为 #infoi 元素使用 .wrapper 作为其位置上下文，它将位于 .wrapper 元素的右上角 .

    #infoi {
  position: absolute;
  top: 0;
  right: 0;
}

    因为 .wrapper 仅仅是 .navi 的容器，所以在 .wrapper 的右上角定位 #infoi 会产生位于 .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>

    备用（无包装）解决方案

    在我们无法编辑任何HTML的情况下，意味着我们无法添加包装元素，我们仍然可以实现所需的效果 .

    我们将使用 position: relative 而不是在 #infoi 元素上使用 position: absolute . 这允许我们从 .navi 元素下面的默认位置重新定位 #infoi 元素 . 使用 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;
}

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

    这就是你需要的：

    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


    

        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">

    
            Now try to click on "Show front layer" button or the text box. It is not active.


    
            Use position: absolute to get the one div on top of another div.


    
            The bg_mask div is between baselayer and front layer.


    
            In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;


    
            <input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
          </div>
        </div>
      </div>
    </form>
  </body>
</html>
    回复于
  • 9

    以下是基于CSS的100％简单解决方案 . "secret"将在包装器元素中使用 display: inline-block . 图像中的 vertical-align: bottom 是克服一些浏览器在元素之后添加的4px填充的黑客攻击 .

    Advice ：如果包装器之前的元素是内联的，则它们最终可以嵌套 . 在这种情况下，您可以"wrap the wrapper"在容器内 display: block - 通常是好的和旧的 div .

    .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>
    回复于
  • 103

    这是一个简单的示例，可以将叠加效果与加载图标放在另一个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

    回复于

相关问题