我一直在使用一個使用模板的Angular插件。我的目標是在「loader-wrap」部分添加更多padding-top，但是當我這樣做時，第二個名爲「message-wrap」的div也會被修改並移動。我需要添加padding-top: 100px到'loader-wrap'，而不必向下移動'message-wrap'。我該如何解決？CSS padding top div修改下面的div

基本結構HTML

<div id="page-wrap"> 
    <section id="loader-wrap"></section> 
    <section id="message-wrap"></section> 
</div>

CSS

gp-splash-loader #page-wrap { 
    z-index: 999; 
    position: fixed; 
    background: #FFFFFF; 
    width: 100%; 
    height: 80%; 
    top: 10%; 
    margin: 0 auto; 
    -webkit-transition: opacity .5s; 
    -moz-transition: opacity .5s; 
    transition: opacity .5s; 
    -webkit-backface-visibility: hidden; 
} 

@media (max-height: 735px) { 
    gp-splash-loader #page-wrap.opened{ 
    height: 100%; 
    top: 0; 
    }; 
} 

gp-splash-loader #page-wrap.closed { 
    opacity: 0; 
} 

gp-splash-loader #page-wrap.opened { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s; 
    -moz-transition: opacity 0.5s; 
    transition: opacity 0.5s; 
} 

gp-splash-loader #loader-wrap { 
    width: 30%; 
    height: 70%; 
    min-width: 300px; 
    max-width: 600px; 
    margin: 10px auto; 
    padding-top: 50px; 
} 
gp-splash-loader #message-wrap { 
    min-width: 1px; 
    margin: 0 auto; 
    height: 30%; 
    min-height: 30%; 
} 

    gp-splash-loader #header-wrap { 
    display: inline-block; 
    }

檢查中codepen：http://codepen.io/gpincheiraa/pen/obdXEx

來源

2016-01-28 Gonzalo Pincheira Arancibia

這是最好的，如果你創建一個工作的例子，你可以選擇文本編輯器.. – miguelmpn

檢查我編輯的問題。 –

我正在刪除我的答案，因爲爲了能夠更好地幫助你，你需要告訴我們你想要它看起來像什麼。添加填充將會推下加載程序，最終推下消息。 –

這裏的交易。您不能使用填充將裝載器向下移動，否則會影響消息。你需要不同的解決方案。嘗試下面的HTML/CSS。

基本上我設置它，所以加載器和消息在一個將被集中的div。然後在這個居中的div裏面，你可以做任何你想做的事情。但是加載器和消息將在中間

如果您只希望加載器居中，那麼您可以將消息從'loader-message-box'div中取出，並對其應用不同的樣式。我要工作了一個又一個搗鼓該解決方案

https://jsfiddle.net/ahmadabdul3/huf5zjkv/ - 無論消息和裝載機都集中

https://jsfiddle.net/ahmadabdul3/huf5zjkv/1/ - 這一個將保持消息底部

代碼：

HTML

<div class='loader-message-box'> 
    <div class='loader-message'> 
    <div class='loader'> 

    </div> 
    <div class='message'> 
     Message 
    </div> 
    </div> 
    <div class='vertical-mid-hack'> 
    </div> 
</div>

CSS

body, html { 
    height: 100%; 
    margin: 0; 
} 
.loader-message-box { 
    width: 100%; 
    height: 100%; 
    text-align: center; 
} 
.loader-message { 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 -2px; 
} 
.vertical-mid-hack { 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 -2px; 
    height: 100%; 
} 
.loader { 
    width: 100px; 
    height: 100px; 
    background-color: teal; 
    border-radius: 100px; 
    margin: 0 auto; 
    margin-bottom: 20px; 
} 
.message { 
    background-color: white; 
    border-radius: 3px; 
    font-family: arial; 
    padding: 20px 0; 
    margin: 0 auto; 
    margin-top: 20px: 
}

來源

2016-01-28 18:18:44

我從CSS中刪除了gp-splash-loader的任何實例。我不知道，但我知道gp-splash-loader不是一個有效的選擇器。除此之外，下面的CSS是重要的部分：

CSS：

body { 
     margin: 0; 
     padding: 0; 
     background: slateblue; 
     text-align: center; 
     top: 0; 
     position: relative; 
    } 
    #loader-wrap { 
     width: 30%; 
     height: 70%; 
     min-width: 300px; 
     max-width: 600px; 
     margin: 10px auto; 
     padding-top: 100px; 
     position: relative; 
     z-index: 10; 
    } 
    #message-wrap { 
     min-width: 1px; 
     margin: 0 auto; 
     height: 30%; 
     min-height: 30%; 
     position: relative; 
     z-index: 11; 
    }

新增50像素padding-top
定位既relative（和身體一樣）
確認在一個從來沒有用不同的方式觸及另一個z-index

http://codepen.io/zer00ne/full/qbYMMQ/

順便說一句，如果你想調整任何部分向上或向下，添加top和一個負值，如果你想該部分上升，反之亦然。恩。

#message-wrap { 
     min-width: 1px; 
     margin: 0 auto; 
     height: 30%; 
     min-height: 30%; 
     position: relative; 
     z-index: 11; 
     top: -100px; 
    }

這應該將#message-wrap放大100px。

來源

2016-01-28 19:08:20 zer00ne

CSS padding top div修改下面的div

回答

CSS：

相關問題