All geek questions in one place

Why does my floating div click on other divs?

I have a div that has a table that has a google map.

I want to place an information field in a google map external to the map, just floating on top

But I can’t get it right, the div information just pushes the google map, despite being on top of the map ...

CSS

.google_map {
    height: 270px;
    width: 100%;
 }

    #flightMapInfo {
        position: relative;
        float: left;
        z-index: 100;
        color: #FFFFFF;
        top: 30px;
        left: 50px;
        background:#5a85a5;
        padding: 5px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }


div.tabContent {
    border: 1px solid #c9c3ba;
    padding: 0.5em;
    background-color: #f1f0ee;
    min-height: 300px;
}


.tableLeft {
    width: 75%;
    float: left;
    border-right: dotted 2px black;
}

HTML

    <div class="mapBlock tabContent">
        <div id="flightMapInfo">WHARGL</div>
        <table class="tableLeft">
            <tr><td><div id="flightMap" class="google_map"></div>
               </table></td></tr></div>
+3
source share
2 answers

I wanted to comment on @scunliffe's answers, but it's rather lengthy.

Floattells the browser that instead of the usual behavior it divshould be either left or right, and the rest of the content should flow (I think: images in * .doc).

, float '[ ] css' float '[ "" "" - ]

, div - ( : position:absolute) .

: absolute 0; 0 , relative absolute. relative 0; 0 , .

divs * , , . divs * - .

    • by div,

, .

position:absolute; , :

<body>
  <div id="wrapper">
    <div id="innerWrapper">
      <div id="content">

CSS:

1.

#content { position: absolute; top: 10px; left: 20px; }

2.

#innerWrapper { positon: absolute; top: 200px; left: 200px; }
#content { position: absolute; top: 10px; left: 20px; }

, , inther #wrapper #innerWrapper , absolute relative , 10px; 20px 0; 0 (read: viewport) - #content 10; 20 .

, #innerWrapper absolute, 200; 200 , 0; 0 #content. ( ), content 210; 220

: http://jsfiddle.net/3dq6V/

+14

, position:absolute; float:xxx.

Float , "" ... , , .

+2

Source: https://habr.com/ru/post/1782997/

More articles:


All Articles