突破父母的div

當我有div與position: absolute，並在它是另一個div與position: absolute內部div將位於通過外（包裝）div給出的框架。現在我想創建一個名爲error_message的類（css），它自己完全位於網站的中心位置，與調用它的位置無關，所以我需要它突破包含error_message div的每個div ..我該怎麼做呢？突破父母的div

來源

2010-09-11 Samuel

我有一個類似的問題，定位在浮動圖像按鈕列表下方的胡佛文本。

對我來說，解決方案是使用「固定」值「位置」屬性

position: fixed

，那麼你可以重新定位，從身體的左上角您的錯誤信息。我使用另一個包裝div來定位所有hoover文本的中心。

enter image description here

發現這裏的解決方案：

CSS nested Div with position absolute?

的代碼是不是從你看到的圖片的代碼，畫面僅僅是爲了說明。在更短的格式

樣式表（見http://lesscss.org/）

<style> 
    .button 
    { 
     float: left; 
     position: relative; 

     a 
     { 
      &:hover, &:focus 
      { 
       .titlePos 
       { 
        .title 
        { 
         display: block; 
        } 
       } 
      } 
      .titlePos 
      { 
       position: fixed; 
       top:50%; 
       left:50%; 
       width: 400px; 
       margin-left: -200px; 

       .title 
       { 
        position:relative; 
        display: none; 
        top: 130px; 
        text-align: center; 
       } 
      } 
     } 
</style>

HTML：

<div id="wrapper"> 
    <div id="content"> 
     <ul> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text1</div> 
         </div> 
        </a> 
       </div> 
      </li> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text2</div> 
         </div> 
        </a> 
       </div> 
      </li> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text3</div> 
         </div> 
        </a> 
       </div> 
      </li> 
      <li> 
       <div class="button"> 
        <a href="#" > 
         <div class="buttonImage"> 
          <img /> 
         </div> 
         <div class="titlePos"> 
          <div class="title">Button Hoover Text4</div> 
         </div> 
        </a> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div>

來源

2011-09-24 18:18:26 c33s

我不知道你爲什麼要那個div打破父div。也許嘗試爲這些新的HTML結構工作？

http://haslayout.net/css-tuts/Horizontal-Centering和http://haslayout.net/css-tuts/Vertical-Centering

這些應該幫助你！

來源

2010-09-11 12:42:46 jolt

好吧，類應該調整它的div，但事先它是未知的錯誤類將被稱爲ergo它可以調出一個小的容器對齊右下角，所以如果我只是中心錯誤div它會看起來居中 - 在右下方的小容器中，但我希望它分別位於整個網頁中心 - 獨立於我稱之爲獨立於任何可能的包裝器/容器的地方 – Samuel 2010-09-11 13:06:48

呃...有沒有什麼地方可以看到你的代碼？至少對我來說，要想像那裏的情況並想出更好的解決方案是很難的。 – jolt 2010-09-11 13:15:44

我有大約20個文件，（html/php，沒有javascript），它們都是單獨設計的，並且有一個帶有一般類的樣式表。如果在某些部分從數據庫獲取內容時出現錯誤，我想通過在發生錯誤的地方顯示

$error;

來啓動錯誤消息，並且我希望該div顯示在所有其他內容之上。我不知道在這裏顯示什麼代碼 – Samuel 2010-09-11 13:28:10

我認爲唯一能讓div突破所有家長div的唯一方法就是對所有家長進行絕對定位，這顯然會造成自己的一系列問題。

爲什麼不簡單地將預定義的隱藏的div作爲身體的直接子對象，而不是將其包裝在標記中。然後，您可以隨意輕鬆定位，並在jQuery的幫助下將錯誤消息插入其中。這種方法的一個明顯的優點是你只需要編寫這個div一次，並動態地插入錯誤信息。我甚至建議看一下jQuery UI，它允許你輕鬆地創建對話框，包括普通模式和模式對話框，還有其他許多功能。

UPDATE

因爲JS是不允許的，一個簡單的方法來做到這一點的確會被顯示在div只要有一個錯誤。所以PHP代碼將是...

if (isset($error)) { 
    echo '<div class="show_error">' . $error . '</div>'; 
}

...和CSS類那將是...

.show_error { 
    width: 400px; // error element's width 
    height: 200px; // error element's height 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -100px; // minus half the height 
    margin-left: -200px; // minus half the width 
}

當然，您可以進一步樣式的錯誤DIV如你所願，但是這些都需要將它定位在死地。

希望這會有所幫助！

來源

2010-09-11 13:52:14

沒有javascript允許：p，但是我會在最後創建容器，顯示$ error，並且我將以$ error =「」開始，如果出現錯誤，只需填寫$ error – Samuel 2010-09-11 14:11:31

請查看我更新的答案。 – 2010-09-11 14:50:21

好吧，這是關於我有什麼，但它不'dead-center'它只是相對於包圍它絕對定位的div中心：/ thx爲你的努力，雖然，欣賞！ – Samuel 2010-09-17 23:56:46

你應該嘗試使用CSS的position:fixed財產，而不是position:absolute，對於錯誤div。 position:fixed將根據瀏覽器窗口定位元素，而不考慮其在DOM中的位置。如果您希望窗口居中，無論窗口大小如何，都可以使固定位置div覆蓋整個屏幕（left: 0，right: 0等）。然後在文本中對齊錯誤消息。

來源

2012-08-08 15:52:10 Jeff

突破父母的div

回答

相關問題