How to place divs ontop of other divs?

1

I am having all sorts of issues with styling my divs: 1) I can’t place divs on top of each other (the methods that usually work don’t), 2) setting a div to height:100% does not work either. Can anyone help with these issues or have examples of how to go about doing these simple tasks. Thanks in advance:)

2

Do you have any example pictures or code of what you’re trying to do? Here is an example Codepen with some divs on top of each other:

3

Hey Brandy,
thanks for the quick response…actually I meant on top of each other in the sense of overlapping. For example

div id=“one” style="width:100%;height:480px;position:absolute;z-index:1"
div id=“two” style=“width:10px;height:10px;position:relative;top:0px;z-index:2” (so this div would be on top or overlap div 2, but it doesnt)

any advice?

Also, how do i set the height of the div to 100% of the screen size. I dont want it to scroll or anything, just be locked to the screen size which could vary from iphone, ipad, landscape or portraint view

Thanks :smile:

4

The overlapping div should be position: absolute, so just switch the two around. No need for z-index. I’m not sure about the height but try height: 100vh; (the viewport height).

5

You can use scroll="false" on the ion-content element to prevent scrolling on that view. This will make it so you can set the div to 100% of the height.

And as vishaal93 said if you switch the divs around you won’t need to use z-index.

HTML:

  <ion-content scroll="false">
    <div class="div1"><h2>Div 1</h2></div>
    <div class="div2"><h2>Div 2</h2></div>
  </ion-content>

CSS:

.div1 {
  background-color: mintcream;
  width: 100px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: calc(50% - 50px);
  z-index: 2;
}

.div2 {
  background-color: lightblue;
  height: 100%;
  width: 100%;
  position: relative;
}

Codepen:

http://codepen.io/brandyshea/pen/EPoPbq