javascript - How to position a div above another div? - Stack Overflow

admin管理员组

文章数量:1292150

My code is:

HTML:

<section>
    <div id="banner">
        <div class="container">
          <p class="para">hello world</p>
        </div>
        <div class="container banner-bottom">
            <div class="card card-primary text-center z-depth-2 contact-main-text">
                <div class="card-block">
                    <p class="white-text">Please fill out the form below and ESC 
staff will be in contact with you shortly.</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS:

.para{
  color:white;
  background: red;
    padding:70px;
    text-align:center;}

  .white-text{
      background:green;
      padding:20px;}

Output is: Bootply
And i want:

Could anyone help me with that?

My code is:

HTML:

<section>
    <div id="banner">
        <div class="container">
          <p class="para">hello world</p>
        </div>
        <div class="container banner-bottom">
            <div class="card card-primary text-center z-depth-2 contact-main-text">
                <div class="card-block">
                    <p class="white-text">Please fill out the form below and ESC 
staff will be in contact with you shortly.</p>
                </div>
            </div>
        </div>
    </div>
</section>

CSS:

.para{
  color:white;
  background: red;
    padding:70px;
    text-align:center;}

  .white-text{
      background:green;
      padding:20px;}

Output is: Bootply
And i want:

Could anyone help me with that?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jan 27, 2017 at 15:16 Chonchol MahmudChonchol Mahmud 2,73588 gold badges4141 silver badges7777 bronze badges 5

• Can you post an example of your expected result-output? – Hackerman Commented Jan 27, 2017 at 15:19
• 1 @Hackerman "And i want:" , he wants the bootply to look like his posted picture. – Jordan.J.D Commented Jan 27, 2017 at 15:20
• The css translate property might be useful here: w3schools./css/css3_2dtransforms.asp – Liam's musings Commented Jan 27, 2017 at 15:21
• There are multiple ways to achieve what you need. What have you tried? – Ionut Necula Commented Jan 27, 2017 at 15:21
• Check if my answer can help you. – Alessandro Incarnati Commented Jan 27, 2017 at 15:27

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

You can set negative top margin to overlay the second div, see the live example:

<div class="container banner-bottom" style="margin-top:-5%;padding:2%">

http://www.bootply./MorC45NB4V

PS: I have used inline css just to show, avoid inline css.

My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.

jQuery

//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});

CSS

 p.white-text{
  margin-left:5%;
  margin-right:5%;
}

Output

bootply

1) In case you want your lower banner to have a full width:

You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.

.banner-bottom {
  position: relative;
  bottom: 45px;
  margin: 0 40px;
}

2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:

 #banner { position:relative;}

.banner-bottom { 
  position: absolute;
  top:75%;
  right:0;
  bottom:auto;
  left:0;
 }

CODEPEN

http://codepen.io/alexincarnati/pen/PWOPjY

Here's my solution for this.

Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.

.card-block {
    position: relative;
    top: -50px;
    margin: auto;
    width: 80%;
}

A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:

#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }

Heres a forked bootply: http://www.bootply./Imuh4wUj50

本文标签： javascriptHow to position a div above another divStack Overflow