How to use "position: absoluted" correctly?

Question

How to use "position: absoluted" correctly?

Navigation

#1 by (3 votes)
#2 by (0 votes)

1

Good evening. I am building an application with phonegap and I have the following problem. I have a div with a background image with "position: absoluted". I would like to create a component under this div ... however it stays on top of the image.

#map_canvas {
    position: absolute; 
    width:100px; 
    height:100px; 
    margin: 0; 
    padding: 0;   
    z-index: -1;
    background-color: #6495ed;
}

<html>
<body>
    <div id="map_canvas">MINHA DIV</div> 
    <div>TESTE</div>
</body>
</html>

I want the "TEST" to be below the map_canvas. Thanks.

html css

asked by anonymous 29.10.2015 / 23:36

2 answers

Double insertion with mssql_query How to save a JSON locally?

score 3 · Answer 1

One detail, correct is position:absolute and not position:absoluted .

You put z-index: -1; , this is negative, or it will go down a level layer.

Use z-index: 1; or greater:

#map_canvas {
    position: absolute; 
    width:100px; 
    height:100px; 
    margin: 0; 
    padding: 0;   
    z-index: 1;
    background-color: #6495ed;
}

<div id="map_canvas">MINHA DIV</div> 
<div>TESTE</div>

Now if you mean in the field of view, ie not one over the other but one above the other in the array, then do not use position: absolute; , use float: , clear: , and sometimes display: table; or display: inline-block; :

#map_canvas {
    width:100px; 
    height:100px;
    background-color: #6495ed;
}

<div id="map_canvas">MINHA DIV</div> 
<div>TESTE</div>

score 0 · Answer 2

You will have to put a margin-top: 100px , which corresponds to the size of the square.

link

#map_canvas {
    position: absolute; 
    width:100px; 
    height:100px; 
    margin: 0; 
    padding: 0;   
    z-index: -1;
    background-color: #6495ed;
}

.teste {
    padding-top: 100px;
}

<html>
<body>
    <div id="map_canvas">MINHA DIV</div> 
    <div class="teste">TESTE</div>
</body>
</html>