Die Absolute Position der div-schieben nicht die anderen Inhalte nach unten

Meisten meinen code in jsFiddle:

http://jsfiddle.net/MilkyTech/suxWt/

Den Inhalt laden soll, auf der ersten Seite in einer weißen box, mit überquellenden Inhalt drängen sich die folgenden Abschnitte auf der Seite nach unten. Jedoch, wie gesehen werden kann, den unteren Abschnitten Last über den oberen Rand der ersten Seite ein weißes Feld. Ich habe versucht, die änderung der Positionierung/löscht den verschiedenen Abschnitten, aber kann nicht scheinen zu schaffen, die notwendige Bewegung.

<section class="page1">
<div class="huge-title centered">  
    <div id='detailsbox'>
    <h1 id='eorvtitle'></h1>
    <img id='eorvimage' src=''>
        <div><p>lots of text lots of text                   
        </div>
    </div>
</section>
<section class="page2" id='page2'>
</section>

.page1 { 
    background: url('../img/bg.jpg')#131313;
    background-size: cover;
    height: 100%;
    position: relative;
}
.huge-title {
    position: absolute;
    top: -20%;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 180px;
}
#detailsbox {
    top: -4em;
    width: 75%;
    left: 12.5%;
    right: 12.5%;
    border: 20px solid white;
    border-radius: 10px;
    background-color: white;
    text-align:center;
    position: absolute;
    float: left;
    clear: both;
}
Bitte posten Sie Ihre HTML-und CSS-hier anstelle der Verlinkung zu Ihrer Webseite, für jetzt und für die Zukunft auf.
Ich verlinkte auf der website hier als ich bin nicht in der Lage zu isolieren, die das problem auf ein paar Zeilen. Ich fühle mich von der Komplexität erfordert mehrere Abschnitte der HTML - /CSS - /JS
Ihr link ist tot
set z-index etwas wie 999
Gelöst...schau auf meine Antwort unten.

InformationsquelleAutor user3608238 | 2014-06-02

  1. 6

    müssen Sie ändern .huge-title und #detailsbox zu position:relative;

    Sie können sich wahrscheinlich loswerden background-size: cover;

    auch ändern .huge-title und #detailsbox um die folgenden:

    .page1 {
  background: url('../img/bg.jpg')#131313;
  height: 100%;
  position: relative;
}
.huge-title {
  position: relative;
  top: 20%;
  right: 0;
  left: 0;
  margin: auto;
  height: 100%;
}
#detailsbox {
  top: -4em;
  width: 75%;
  left: 12.5%;
  right: 12.5%;
  border: 20px solid white;
  border-radius: 10px;
  background-color: white;
  text-align: center;
  position: relative;
  float: left;
  clear: both;
}
    Das ist wacked! Meine Geige irgendwie gehackt oder so etwas. In mein jsfiddle account gibt es jetzt als spam markiert und der code wurde ersetzt mit (function(i){var e=/iPhone/i,n=/iPod/i,o=/iPad/i,t=/(?=.*\bAndroid\b)(?=.*\bMobile

    InformationsquelleAutor Chris M

  2. 11

    Absolute Positionierung nicht drücken Behälter nach unten. Es stellt sich oben oder unten, basierend auf der z-Indizierung. Sie müssen schließen Sie den absoluten Inhalt innerhalb eines relative-container zu schieben, andere Container nach unten, ähnlich wie in jquery Slider.

    InformationsquelleAutor Mayank Tripathi

  3. 4

    Die ordnungsgemäße Funktion der absoluten position ist, überlappen sich die Inhalte. Wenn Sie möchten, dass andere Inhalte automatisch nach unten drücken, dann verwenden Sie relative position.

    Einstellung der #detailsbox zu position: relative lässt immer noch das gleiche Problem
    Während Joseph ' s Antwort ist nicht die beste, die Punkt steht, dass position: absolute; entfernt ein element aus der regelmäßigen content-flow. Es ist, als wenn Ihre website ist auf einer Ebene der Existenz, und das absolut positionierte element schwebt über es.

    InformationsquelleAutor KnightHawk

  4. 1

    Absolut positionierte Elemente sind entfernt von den wichtigsten Fluss des HTML. Das ist, warum es nicht darum, die Elemente unterhalb nach unten. Es sitzen nun auf der Oberseite der Elemente vor und nach der eher als zwischen Ihnen.

    Möchten Sie vielleicht check this out.

    Ob oder nicht die absolute Positionierung in Ihrem Falle sinnvoll ist, ist schwer zu sagen ohne zu sehen, das design, die Sie versuchen zu implementieren. Mit der default-Option (auch bekannt als "statische") oder vielleicht auch die relative Positionierung schieben die anderen Inhalte nach unten, unter dem weißen Kasten, aber ohne Anstalten zu betrachten, es ist schwer zu sagen, ob das die wirkliche Lösung.

    InformationsquelleAutor d512

  5. 1

    Die Lösung ist, erstellen Sie eine leere Platzhalter-div mit float nach rechts oder Links. Damit wäre gewährleistet, dass es einen Raum gibt zwischen den beiden.
    Finden Sie diese Antwort

    InformationsquelleAutor Shashank Reddy Arrabothu

  6. 0

    Können Sie fügen Sie einen leeren Abschnitt zwischen page1 und page2 und geben Sie die css-unten

    height: 100%;

    InformationsquelleAutor Ozgu

Schreibe einen Kommentar