標題不斷移動到導航欄（引導）

我有一個導航欄，我有一些文字直接在它上面的導航欄下方的圖像前面。這個圖像是響應式的，所以它根據尺寸的屏幕。但是，當我將屏幕調整到最小尺寸（即移動設備上的尺寸）時，圖像會保留在一個位置，但通常會固定在圖像前方的文本會向上推，在導航欄後面。你能幫忙解釋這是爲什麼嗎？這是我的代碼。標題不斷移動到導航欄（引導）

HTML

<header> 
    <!--Navigation Secton--> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="#"> Anna's Portfolio</a> 
      </div> 
      <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#"> About</a></li>  
       <li><a href="#">Works</a></li> 
       <li><a href="#">Talk To Me</a></li>   
      </ul> 
     </div> 
    </nav> 
</header> 
<body> 
    <!-- Top Image, Title Text--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <img class="image img img-responsive" src="http://www.qerja.com/journal/wp-content/uploads/CODING.jpg"> 
      <div class="text"> 
       <h1>Anna's Portfolio</h1> 
      <h2>Come Inside.</h2> 
      </div> 
     </div> 
    </div> 

    <!--About, Mission--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="about"> 
       <h2>About Me</h2> 
       <p>My name is Anna Gibson and I'm a web developer<br> who seeks to tell the stories of the marginalized.<br> I'm a staunch advocate for those who struggle with<br> their mental health and I hope that I can create apps<br> that will help people with their mental health as apps<br> have helped me. </p> 
      </div> 
     </div> 
    </div> 
</body> 
<footer></footer> 
</html>

CSS

.navbar-brand { 
    position:relative; 
    bottom:70px; 
    text-align:right; 
} 

.image { 
    position:relative; 
    width:100%; 
    padding-top:0; 
    height:200px; 
} 

.text { 
    text-align:center; 
    position:relative; 
    bottom:400px; 
    color:white; 
    font-family:; 
    font-size:24px;  
}

非常感謝，如果有不清楚的地方，讓我知道。

來源

2017-07-18 Anna Gibson

由於底部文字被推入導航欄後面：400px;問題上.text類

你需要一些HTML和CSS修復

HTML

<header> 
<!--Navigation Secton--> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="#">Anna Portfolio</a> 
      </div> 
      <div class="collapse navbar-collapse" id="myNavbar"> 
       <ul class="nav navbar-nav navbar-right"> 
       <li class="active"><a href="#"> About</a></li>  
       <li><a href="#">Works</a></li> 
       <li><a href="#">Talk To Me</a></li>   
       </ul> 
      </div> 
     </div> 
    </nav> 
</header> 
<body> 
    <!-- Top Image, Title Text--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="main-section"> 
       <img class="image img img-responsive" src="http://www.qerja.com/journal/wp-content/uploads/CODING.jpg"> 
       <div class="text"> 
        <h1>Anna's Portfolio</h1> 
        <h2>Come Inside.</h2> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--About, Mission--> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="about"> 
       <h2>About Me</h2> 
       <p>My name is Anna Gibson and I'm a web developer<br> who seeks to tell the stories of the marginalized.<br> I'm a staunch advocate for those who struggle with<br> their mental health and I hope that I can create apps<br> that will help people with their mental health as apps<br> have helped me. </p> 
      </div> 
     </div> 
    </div> 
</body>

CSS

.navbar-brand { 
position:relative; 
bottom:70px; 
text-align:right; 
} 

.main-section{ 
    position: relative; 
} 

.image { 
    position:relative; 
    width:100%; 
    padding-top:0; 
    height:200px; 
} 

.text { 
text-align:center; 
position:absolute; 
color:white; 
font-family:; 
font-size:24px; 
left:0; 
right:0; 
top: 0; 
bottom: 0; 
margin:auto; 
}

Link for reference

希望這有助於..

來源

2017-07-18 03:55:45

標題不斷移動到導航欄（引導）

回答

相關問題