CSS定位絕對導致元素堆疊時不需要

我已經放在一起使用CSS3和JQuery一個簡單的照片堆棧。它工作得很好，但有一個主要問題。該網站需要顯示多個堆棧，由於堆棧用於在網站上顯示「照片庫」，所以顯示的數量不可預測，顯然畫廊越多，堆棧越多。CSS定位絕對導致元素堆疊時不需要

如果沒有堆棧，這很簡單，只需要從數據庫中檢索src來回顯標籤。在使用堆棧時，這仍然很簡單，因爲唯一的區別是CSS和JQuery的一小部分。

現在，爲了解決這個問題，我使用了絕對定位來允許堆棧中的三個圖像進行堆疊。這很好，但是現在當堆棧被回顯出來時，它將堆疊堆疊，哦！因此，我最終得到的只是一大堆圖像，而不是將三張圖像分開放在一塊。

這是代碼。

<html> 
<head> 

    <style type="text/css"> 

     #content { 
      margin: 0 auto; 
      width: 1024px; 
     } 

     #viewAlbumTitle { 
      font-size: 20px; 

     } 

     #grid { 

      line-height:   0; 
      -webkit-column-count: 4; 
      -webkit-column-gap: 10px; 
      -moz-column-count: 4; 
      -moz-column-gap:  10px; 
      column-count:   4; 
      column-gap:   10px; 
     } 

     #grid img { 
      width:   100% !important; 
      height:  auto !important; 
      margin-bottom: 10px; 
      padding:  5px; 
      cursor:  pointer; 
     } 

     @media (max-width: 480px) { 

      #grid { 
       -moz-column-count: 2; 
       -webkit-column-count: 2; 
       column-count:   2; 
      } 
     } 

     @media (max-width: 320px) { 
      #grid { 
       -moz-column-count: 1; 
       -webkit-column-count: 1; 
       column-count:   1; 
      } 
     } 

     .pv-div { 
      padding: 0 0 4px 0; 
     } 

     .pv-link { 
      font-size:  15px; 
      color:   #000; 
      text-decoration: none; 
     } 

     .pv-link:hover { 
      text-decoration: underline; 
     } 

     .thumb-over:hover { 

     } 

      /* image stsck */ 

     .image_stack { 
      position: absolute; 
     } 

     .image_stack img { 
      position:   absolute; 
      border:    4px solid #FFF; 
      box-shadow:   2px 2px 8px rgba(0, 0, 0, 0.5); 
      -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
      -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); 
      z-index:   9999; 
      -moz-transition: all 0.2s ease; 
      -webkit-transition: all 0.2s ease; 
      -o-transition:  all 0.2s ease; 
      transition:   all 0.2s ease; 
     } 

     .image_stack #photo1 { 
      top: 8px; 
      left: 108px; 
     } 

     .image_stack #photo2 { 
      top: 6px; 
      left: 104px; 
     } 

     .image_stack #photo3 { 
      top: 4px; 
      left: 100px; 
      right: 100px; 
     } 

     .image_stack .rotate1 { 
      -webkit-transform: rotate(15deg); 
      -moz-transform: rotate(15deg); 
      transform:   rotate(15deg); 
      -ms-transform:  rotate(15deg); 
      -o-transform:  rotate(15deg); 
     } 

     .image_stack .rotate2 { 
      -webkit-transform: rotate(0deg); 
      -moz-transform: rotate(0deg); 
      transform:   rotate(0deg); 
      -ms-transform:  rotate(0deg); 
      -o-transform:  rotate(0deg); 
     } 

     .image_stack .rotate3 { 
      -webkit-transform: rotate(-15deg); 
      -moz-transform: rotate(-15deg); 
      transform:   rotate(-15deg); 
      -ms-transform:  rotate(-15deg); 
      -o-transform:  rotate(-15deg); 
      cursor:   pointer; 
     } 

     .stack_wrap { 
      margin-left: -100px; 

     } 


    </style> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script type="text/javascript"> 


     $(document).ready(function() { 
      $(".image_stack").delegate('img', 'mouseenter', function() { 
       if ($(this).hasClass('stackphotos')) {// 


        var $parent = $(this).parent(); 
        $parent.find('img#photo1').addClass('rotate1'); 
        $parent.find('img#photo2').addClass('rotate2'); 
        $parent.find('img#photo3').addClass('rotate3'); 
        $parent.find('img#photo1').css("left", "150px"); 
        $parent.find('img#photo3').css("left", "50px"); 


       } 
      }) 
       .delegate('img', 'mouseleave', function() { 
        $('img#photo1').removeClass('rotate1'); 
        $('img#photo2').removeClass('rotate2'); 
        $('img#photo3').removeClass('rotate3'); 
        $('img#photo1').css("left", ""); 
        $('img#photo3').css("left", ""); 

       }); 
      ; 
     }); 

    </script> 

</head> 
<body> 

<!-- header --> 
{include file="header.tpl"} 
<!-- header end --> 

<div id="content"> 

    <div style="margin:42px 0 0 -15px;"> 

     <div style="float:left; width:192px; padding:30px 24px 0 0;"> 
      <div> 
       <span style="font-size:20px;">Username's photos</span> 

       <div style="padding:10px 0 10px 0;"><img src="img/avatar.png" width="192"/></div> 
       <div class="pv-div"><a class="pv-link" href="">Edit photo's</a></div> 
       <div class="pv-div"><a class="pv-link" href="">Edit album</a></div> 
       <div class="pv-div"><a class="pv-link" href="">Delete</a></div> 
      </div> 


     </div> 


     <div style="float:left; border-left:1px solid #ebebeb; width:795px; min-height:400px; padding:32px 0 0 24px;"> 
      <!--<span>You currently have no pictures, why not upload some now?</span>--> 

      <div> 
       <span id="viewAlbumTitle">Username's photo albums</span> 

       <div style="float:right"><a href="" class="main-button" onClick=('popUpload') style="margin:0;">upload 
        new pics</a></div> 
      </div> 

      <div style="margin:20px 0 0 0"></div> 

      <div> 

       <div style="margin:10px 0 0 0"></div> 

       <div id="grid"> 

        <div class="stack_wrap" style="float:left;"> 
         <div class="image_stack" style="postion:relative;"> 
          <img id="photo1" class="stackphotos" src="img/avatar.png"> 
          <img id="photo2" class="stackphotos" src="img/avatar.png"> 
          <img id="photo3" class="stackphotos" src="img/avatar.png"> 
         </div> 

         <div class="image_stack" style="postion:relative;"> 
          <img id="photo1" class="stackphotos" src="img/avatar.png"> 
          <img id="photo2" class="stackphotos" src="img/avatar.png"> 
          <img id="photo3" class="stackphotos" src="img/avatar.png"> 
         </div> 
        </div> 


       </div> 


      </div> 
     </div> 
    </div> 

    <div style="width:100%; padding:10px 0 20px 0;"> 

    </div> 

</body> 
</html>

如果任何人可以幫助我，它將非常感激。

在此先感謝。

傑米

來源

2012-02-16 Jamie Turner

在同一文件中多次使用相同的ID是不允許的，而** **會造成問題。如果需要描述具有相似含義或功能的元素，請使用類名稱。 – 2012-02-16 14:47:21

設置第二個堆棧的頂部位置。

<div class="image_stack" style="postion:relative;top:200px">

來源

2012-02-16 14:42:37

你不想要位置：絕對的容器。

.image_stack { 
    position:absolute; // this is wrong 
}

對於位置爲absolute的每個image_stack，每個堆棧將繼續堆疊在彼此之上。這是因爲position：absolute應用於其默認0 0軸開始的父容器。

這是你的CSS應該讀什麼：

.image_stack { 
    position:relative; 
} 
.stackphotos{ 
    position:absolute; 
}

來源

2012-02-16 14:45:38 Downpour046

這將允許您的堆疊照片被絕對定位到image_stack容器 – Downpour046 2012-02-16 14:46:24

傾盆大雨，這樣做會因爲某種原因使整個事情消失。這就是我在打這裏之前試圖做到的方式。 – 2012-02-16 15:16:52

開始在你的元素周圍添加一些邊框... border：1px純紅色，邊框：1px純綠色，這樣你就可以看到你的元素在哪裏飛行。 – Downpour046 2012-02-16 16:09:14

將在它自己的容器元素三幅圖像中的每個堆疊：

<div class="grid"> 
    <div class="stack"> 
     <img src="img1" /> 
     <img src="img2" /> 
     <img src="img3" /> 
    </div> 
</div>

設置書庫左浮動：

.stack { 
    float: left; 
}

設置堆棧內的圖像是絕對的lutely定位： .stack img { position：absolute; left：0; top：0; }

使用jQuery，如果你需要能夠看到，有超過1個圖像中的堆棧，以抵消每個圖像：

$(document).ready(function() { 
    $(".stack img").each(function(i, element) { 
     var sibling = element.previousSibling; 

     var top = 0; 
     var left = 0; 

     if (sibling) { 
      top = $(sibling).position().top; 
      left = $(sibling).position().left; 
     } 

     top += 5; 
     left += 5; 

     $(element).css("left", left); 
     $(element).css("top", top); 
    }); 
});

來源

2012-02-16 14:50:36 crush

似乎使整個事情行爲不正常：/ – 2012-02-16 15:17:24

描述不規律 – crush 2012-02-16 15:18:44

仍然卡住了同樣的問題，但圖像顯示在一個不同的方式，而不是整齊地顯示所有3，以類似的方式，你如何扇出甲板他們扭曲了所有的地方。 – 2012-02-16 15:26:53

我已經測試工作在image_stack類的代碼，並設置position:relative 。注意：不要忘了添加!important

.image_stack{position:relative !important}

您還可以設置z-index的

來源

2014-10-26 08:36:39 user3233390

CSS定位絕對導致元素堆疊時不需要

回答

相關問題