Make Second Div Appear Above First, Without Absolute Position or Changing HTML

Make second div appear above first, without absolute position or changing html

Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.

#container { display:flex; flex-direction: column; text-align:center;}

#items { order: 2 }

#logo { order: 1 }

#picture { display: none; }

<div id="container">

    <div id="items">Items</div>

    <div id="logo">Logo</div>

    <div id="picture">Picture</div>

</div>

How to position second div over first div?

Apply a transformation (without visible effects) on the second div e.g.

transform: scale(1);

https://jsfiddle.net/cbeaw84h/

Position a Div to appear below another DIV

I think the solution entails doing the following. Have a wrapper div:

<div id="my_wrapper">
  content
</div>

Have this div absolutely positioned. Then inside of this div have two divs, your visible div, and the one that needs to "become" visible.

<div id="my_wrapper">
  <div id="visible_item">Item</div>
  <div id="may_become_visible">Not Visible Now Item</div>
</div>

Then you can show/hide as necessary and position the inside content correctly.

How to overlay one div over another div

#container {

  width: 100px;

  height: 100px;

  position: relative;

}

#navi,

#infoi {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

}

#infoi {

  z-index: 10;

}

<div id="container">

  <div id="navi">a</div>

  <div id="infoi">

    <img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b

  </div>

</div>

How to make second floated div to come on top of the first floated div?

If you want place the right div before left, just remove the float:left property from #right.

Fiddle

If you want the right DIV above the left, you need to use absolute position

Move The First Div Appear Under the Second One in CSS

http://jsfiddle.net/QGyNN/

HTML

<div id="wrapper">
    <div id="txt">
    </div>
    <div id="img">
    </div>
</div>​

CSS

div#wrapper
{
    height:100px;
    width:60px;
    border:1px solid black;
    position:relative;
}
div#txt, div#img
{
    position:absolute;
    margin: 5px;
    width:50px;
}
div#img
{
    top:0px;
    height: 60px;
    border:1px solid red;
}
div#txt
{
    bottom:0px;
    height:20px;
    border:1px solid green;
}​

---

Related Topics