使 div 与其他 4 个 div 水平重叠并在页面上伸展（高度 100%？）

Question

所以我有 4 个带有按钮的不同 div，我正在尝试进行设置，以便每当单击其中一个按钮时，它都会与页面上的其他 div 重叠。

我知道它与 z-index 和 div 的定位有关，但我想它需要添加到 Jquery 而不是 CSS？

我检查了之前的代码，其中 div 垂直重叠。这是代码：

$('#divleft, #divmid, #divright').toggle(function () {
  var cfg = {height:'200', width:'100%'};
  $(this).css({'z-index':100});
  var pct = $(this).css('left').split('p')[0]/$(document).width();

  if(pct <= .33 && pct > 0){
    cfg.left = '0';
    $(this).data('oldLeft', "33%");
  } else if(pct <= .66 && pct > .33) {
    cfg.left = '0';
    $(this).data('oldLeft', "66%");
  }
  $(this).animate(cfg)
}, function () {
  var cfg= {height:'200', width:'33%', 'z-index':1};

  if ($(this).data('oldLeft')) {
    console.log($(this).data('oldLeft'));
    cfg.left = $(this).data('oldLeft');   
  }
  $(this).animate(cfg)
})

#divleft {
  width:33.3%;
  height:200px;
  background:#ccc;
  z-index: 1;
  margin-top: 10px;
  position: absolute;
  left:0;
}

#divmid {
  width:33.3%;
  height: 200px;
  background: #696;
  margin-top: 10px;
  z-index: 1;
  position:absolute;
  left:33%;
}

#divright {
  width:33.3%;
  height:200px;
  background:#000;
  margin-top: 10px;
  z-index: 1;  
  position:absolute;
  left:66%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divleft"><p>Click Me!</p></div>
<div id="divmid"></div>
<div id="divright"></div>

这段代码的作用是它使用 100% 的宽度垂直重叠 div。我只是想知道如果你要水平重叠 div，你会怎么做。

到目前为止我的代码是这样的：

html, body {
  width: 80%;
  margin: 0 auto;
}

head {
  text-align:left;
}

head, img {
  width: 350px;
  height: 100px;
  float: left;
  margin-bottom: 1%;
}

.container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}


button {
  background-color: #cccccc;
  color: #000000;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  padding-left: 15%;
  outline: none;
  font-size: 17px;
  transition: 0.4s;
  margin-top: 2%;
}

.icon {
  width: 25px;
  height: 25px;
  padding-right: 15%;
  float: right;
}

button.accordion.active, button.accordion:hover {
  background-color: #ddd;
}

<div class="container">
  <div id="first">
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
  </div>

  <div id="second">
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
  </div>	

  <div id="third">
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
  </div>	

  <div id="fourth">
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
  </div>	

  <div id="last">
    <button><h3>Random <img class ="icon" src="infoicon.png"></h3></button>
  </div>

</div>

谢谢！

Answer 1

我认为你想要得到它更多的是与相对高度和绝对定位有关，而不是仅与 z-index 属性有关。

一旦点击元素div，它就必须覆盖父元素。为此，您应该将容器的position: relative 属性和增长元素作为position: absolute 和height 和width 设置为100%，并将top 和left与父级重合（到0） .该按钮位于该 div (#first, #second, #third, #last) 内，因此它也必须是 height: 100%

最后你只需设置z-index 以确保当前按钮重叠并覆盖显示的其他按钮。

$('.container div').click(function(event){
  $(this).toggleClass('active');
 
})

html, body{
    width: 80%;
    margin: 0 auto;
}

head{
    text-align:left;
}

head, img{
    width: 350px;
    height: 100px;
    float: left;
    margin-bottom: 1%;
}

.container{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}


button{
    background-color: #cccccc;
    color: #000000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    padding-left: 15%;
    outline: none;
    font-size: 17px;
    
    margin-top: 2%;
    position: relative;
}


button h3{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.icon {
    height: 2.5em;
    width: 1.7em;
    float: right;
}

.icon {
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}

.container div.active{
 height: 100%; 
 background-color: white;
 position:absolute;
 top:0;
 left:0;
 width: 100%;
 z-index: 2;
}
.container div.active button{
   height: 100%;
}
#first,#second,#third,#fourth,#last{
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div id="first">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>

    <div id="second">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>  

    <div id="third">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>  

    <div id="fourth">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>  

    <div id="last">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>

</div>

Answer 2

很好的解决方案，感谢您的快速响应！只是想知道我会在哪里放置我的 jquery 代码？

$('.container div').click(function(event){
  $(this).toggleClass('active');
 
})

html, body{
    width: 80%;
    margin: 0 auto;
}

head{
    text-align:left;
}

head, img{
    width: 350px;
    height: 100px;
    float: left;
    margin-bottom: 1%;
}

.container{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
}


button{
    background-color: #cccccc;
    color: #000000;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    padding-left: 15%;
    outline: none;
    font-size: 17px;
    
    margin-top: 2%;
    position: relative;
}


button h3{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.icon {
    height: 2.5em;
    width: 1.7em;
    float: right;
}

.icon {
    background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg?v=1b3cdae197be);
}

.container div.active{
 height: 100%; 
 background-color: white;
 position:absolute;
 top:0;
 left:0;
 width: 100%;
 z-index: 2;
}
.container div.active button{
   height: 100%;
}
#first,#second,#third,#fourth,#last{
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div id="first">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>

    <div id="second">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>  

    <div id="third">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>  

    <div id="fourth">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>  

    <div id="last">
        <button><h3>Random <div class ="icon" /></h3></button>
    </div>

</div>

Answer 3

[编辑]：在关闭 html 文档的正文标记之前包含 jquery，然后在下面编写 javascript。像下面这样：

<body> 
  <!-- Here goes your page content -->
  
  <!-- Here you include the jquery and any js you may need -->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  
  <!-- Here goes custom jquery code -->
  <script>
    $('.btn').click( function(){
      $(this).parent().addClass("active")
    })
  </script>
</body>

我建议你检查 Stackoverflow 规则： https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?rq=1

这是您问题的简化解决方案：

$('.btn').click( function(){
  $(this).parent().addClass("active")
})

.elements-container {
  position: relative;
}

.element {
  float: left;
  width: 25%;
  background-color: grey;
  text-align: center;
  padding: 50px 0;
}

.element.active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elements-container"> 
 <div class="element">
   <button class="btn">Button 1</button>
 </div>
 <div class="element">
   <button class="btn">Button 2</button>
 </div>
 
 <div class="element">
   <button class="btn">Button 3</button>
 </div>
 
 <div class="element">
   <button class="btn">Button 4</button>
 </div>
</div>