Gitter fliegt herum auf dem ansprechenden Teil

Question

Ich habe viel mit dem reaktionsschnellen Teil einer Seite zu kämpfen.

Wenn ich auf etwa 991 px verkleinere, fliegen das Buch und der Überschriftstext herum. Ursprünglich habe ich sm-hidden und sm-visible verwendet, weil ich möchte, dass die Textüberschrift zuerst kam, und danach das Bild des Buches.

Aber wie kann ich das lösen? Ich fange an, Ideen zu verlieren, wie man es anpasst, so dass das Buch nicht unter das Hintergrundbild geht, wenn ich um die 991 px herumgehe. Ich möchte, dass die Überschrift und das Buch img im Hintergrundbild bleiben.

Ich hoffe jemand kann durch die Entwicklerkonsole sehen, was hier falsch ist. Mein Code sieht bis jetzt so aus:

<div class="background-image" @Html.Raw(topImageStyling)> 
      <div> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-sm-12 col-md-12 img logo img-responsive"> 
          <a href="www.google.com"><img src="https://www.site.dk/img/inovo-logo-white-small.png"></a> 
         </div> 
        </div> 
       </div> 
       <div class="book container col-sm-12 hidden-sm hidden-xs col-md-3 col-lg-4"> 
        <img src="https://www.site.dk/img/landingpages/.png"> 
       </div> 

        <div class="container col-sm-12 col-md-9 col-lg-8"> 

         @if (!string.IsNullOrEmpty(headerText)) 
      { 
       if (pageAlias == "Blog") 
       { 
           <h1 class="header-xl center"> 
            @Html.Raw(headerText) 
           </h1> 
          } 
          else 
          { 
           <p class="header-xl"> 
            @Html.Raw(headerText) 
           </p> 
          } 
         } 
         @if (CurrentPage.HasValue("imageTeaserText")) 
      { 
          <p class="sub-header center"> 
           @Html.Raw(CurrentPage.imageTeaserText) 
          </p> 
         } 


        </div> 
       <div class="col-sm-12 visible-sm visible-xs"> 
        <img src="https://www.site.dk/img/landingpages/g.png"> 
       </div> 
       </div> 
     </div> 

    <div class="container-fluid"> 
     <div class="row"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-12 main-content" id="main-content"> 
         <div class="row"> 
          <div class="col-lg-12"> 
           @CurrentPage.GetGridHtml("site") 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Also ich denke, ich könnte die Lösung für Ihr Problem gefunden haben. In Zeile 3044 Ihres CSS gibt es das Element img. Ich habe einfach die folgenden Code:

img { 
display: block; 
max-width: 100%; 
height: auto; 
position: relative; 
z-index: 1030;} 

Es ist für Bildschirm arbeitet Größen größer als der 960px Bereich und wirkt ein wenig aus dem 760px-440px Bereich auf. Ich dachte, dass Sie jetzt nur eine Medienabfrage für die entsprechenden Ansichtsfensterbreiten hinzufügen müssen. Die Lösung zu erklären ist einfach. Innerhalb von CSS haben alle Elemente, die innerhalb des HTML-Dokuments geschichtet sind, einen Z-Index, der ihre Position im Stapel bestimmt. Von dort, um den Z-Index zu reagieren, setze ich die Position für dieses Element img relativ. Die z-index -Eigenschaft funktioniert nur, wenn die Position auf etwas anderes als statisch gesetzt ist, was der Standardwert ist. Ich hoffe das hilft! Lass es mich wissen, wenn du irgendwelche Fragen hast.