CSS padding top div修改下面的div

Question

I've been working on an Angular plugin that uses a template. My goal is to add more padding-top to the section "loader-wrap", but when I do this, the second div called "message-wrap" is modified and moved as well. I need add padding-top: 100px to 'loader-wrap' without moving down 'message-wrap' along with it. How do I fix this?

Basic Structure 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;
  }

check in codepen: http://codepen.io/gpincheiraa/pen/obdXEx

Answer 1

Here's the deal. You can't move that loader down with padding, otherwise it will affect the message. you need a different solution. try the below html/css.

Basically I set it up so the loader and the message are in a div that will be centered. then inside of that centered div, you can do whatever you want. But the loader and message will be in the middle

if you want only the loader to be centered, then you can take the message out of the 'loader-message-box' div, and apply different styles to it. I'll work up a another fiddle for that solution

https://jsfiddle.net/ahmadabdul3/huf5zjkv/ - both message and loader are centered

https://jsfiddle.net/ahmadabdul3/huf5zjkv/1/ - this one will keep the message on the bottom

code:

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: 
}

Answer 2

I removed any instance of gp-splash-loader from CSS. I don't know ng but I do know gp-splash-loader is not a valid selector. Other than that, the following CSS is the important part:

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;
    }

• Added 50px padding-top
• Positioned both relative (and body as well)
• Made sure that one never touches the other by using different z-index

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

BTW, if you want to adjust either section up or down, add top and a negative value if you want the section to go up and vice versa. ex.

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

That should place #message-wrap 100px higher.