How to use "position:absoluted" correctly?

Asked

Viewed 52 times

1

good night. 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 below this div....

#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

2 answers

3

A detail, the correct is position:absolute and not position:absoluted.

You put z-index: -1;, This is negative, so it’s going down a layer of level.

Use the 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 vision, ie not one over the other, but one above the other in the layout, 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>

  • Thank you, I was able to work as follows: http://jsfiddle.net/zVBDc/760/

  • @Lucascarnevalli I don’t understand why you’re using position:absolute; where it’s not necessary. It seems to me the same result as the second code I put in my answer, but you changed the width and color of the border, just this.

  • The code I sent now is not what I’m using, it’s an example of solving the problem. I’m working with google maps, and the map is only appearing when I define a div with Absolute... So I had to make an alternate means to get around.

  • @Lucascarnevalli I believe you have not understood, regardless of you apply position: absolute whether to have red or blue color, good or without edge, what matters is the effect you want to achieve, and the "effect" you created had not the need position:absolute; and basically the second code I posted brings the same "effect" needed. Now if there is something that differs in the "effect" (I do not refer to the code) then I could point out to understand, because if they are not the same effect, then it is because it was not necessarily explained in your question what you need.

0

You’ll have to put one margin-top: 100px, which corresponds to the size of the square.

https://jsfiddle.net/8ue6yzqu/

#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>

  • https://jsfiddle.net/8ue6yzqu/... for the margin your map must have a top: 0;

  • Instead of commenting, you can click [Edit] below your reply to include more information.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.