Wie kann man ein element über ein anderes element?

Ich wollen <div> über eine <img>.

Den HTML sieht wie folgt aus.

CSS:

body {
  background-color: #cCa;
}

.image {
  position: relative;
  background-repeat: no-repeat;
}

.content {
  background-color: lightGrey;
  position: absolute;
  overflow: none;
  left: 40px;
  top: 40px;
}

HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12">
      <div class="image"> <img src="css_js/img/image.jpg"> </div>
      <div class="content img-circle">[content]</div>
    </div>
  </div>
</div>

Weitere Infos mit Bilder:

als browser-groß

wenn die browsergröße zu klein ist.

Haben Sie versucht, mit css z-index?
mögliche Duplikate von wie kann man die ul über die img (responsive)?
Die Frage war nur 5 Stunden alt! Auch; wenn Ihre Frage nicht immer die Aufmerksamkeit, die Sie wollen, versuchen Sie es Bearbeiten um es klarer, Umbuchung der gleichen Frage, ist stark verpönt
Dies ist ein weiterer Weg, es zu tun: jsfiddle.net/h46KA/1

InformationsquelleAutor Nazanin Goodarzi | 2013-07-05

41

Versuchen Sie, die z-index Eigentum der Inhalt div höher ist als das Bild, wie diese:
```
.content{
    z-index: 3;
}
```
Diese werde es so machen, dass der Inhalt div wird über dem Bild. Machen Sie es größer als der browser kleiner wird, sind Sie gehen zu müssen, media queries. Dies sind die tags, die Sie in Ihrem Kopf, die Ihnen erlauben, laden verschiedene CSS-Dateien, basierend auf der Größe des Bildschirms. Grundsätzlich sollten Sie nur haben, desto größer wird die Schrift-Einstellungen für die CSS-Dateien geladen, wenn der Bildschirm kleiner ist. Wenn Sie nicht vertraut sind mit media queries, dies ist ein guter Ort, um zu Lesen bis auf: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Viel Glück!

UPDATE:

Basierend auf Ihren Kommentar, sollten Sie Ihren code zu diesem:
```
<div class="span12">
    <div class="image"> 
        <img src="css_js/img/image.jpg"> 
        <div class="content img-circle">[content]</div>
    </div>
</div>
```
Dieser macht es so, dass die img und .content sind umhüllt von der .image. Dann in der CSS-Datei, fügen Sie die folgende Regel:
```
.content{
    position: relative;
}
```
Dies wird sich ändern Sie die position des Inhalts, relativ zu dem das Bild div liegt. Lesen Sie auf der position Eigenschaft, um zu lernen, wie Sie die .content herum. Sie müssen immer noch die Medien-Anfragen zum update der Größe/position des div in der Antwort auf die browser-Größe verändern wenn.
- Ich will <div> ist sehnte, <Bild> und mit der Größe browser Größe, div position verändert, bezogen auf die position des Bildes.
- ok, aber gibt es eine Möglichkeit, die Verwendung von bootstrap-Klassen? "bootstrap css-framework"
- Ich weiß, was bootstrap ist, und Nein, gibt es nicht. Sie können die bootstrap responsive css-Datei, aber die, die es nicht tun, was Sie wollen, ohne Anpassung, und es ist viel einfacher, um Ihre eigenen css-Regeln jetzt, als zu versuchen, passen Sie die bootstrap-ones
InformationsquelleAutor taylorc93

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.