代码之家 › 专栏 › 技术社区 › Dannis Karassavas

使div与其他4个div水平重叠,并在页面上拉伸(高度100%?)

overlap css html jquery javascript

Dannis Karassavas · 技术社区 · 7 年前

所以我有4个不同的分区,其中有按钮,我正在尝试设置,这样每当单击其中一个按钮时,它就会与页面上的其他分区重叠。

我知道这与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>

谢谢

3 回复 | 直到 7 年前

jmtalarn 7 年前

我认为你们想要得到的更多的是相对高度和绝对位置,而不是 z-index 仅限属性。

div 单击它必须覆盖父元素。要做到这一点,你应该把容器 position: relative 属性和生长元素 position: absolute height 和 width 100%和定位 top 和 left 与父项重合(到0)。按钮在那个div里面( #first, #second, #third, #last )所以它也必须是 height: 100%

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

$('.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>

Dannis Karassavas 7 年前

非常好的解决方案,感谢您的快速响应!只是想知道我将把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>

Tarik Fojnica 7 年前

[编辑]:在关闭html文档的body标记之前包含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>