定位一個不在屏幕上的鏈接（按鈕）

-2

我正在爲一家新公司設計一個網頁，並且標題完美無缺，只是我們還沒有標識，所以我放了一個位置。現在我用替換了，但是它下面的呼叫動作按鈕已經被推出屏幕。我知道有數百萬的互聯網定位教程，但我很嚴重卡住！定位一個不在屏幕上的鏈接（按鈕）

<body> 
<header> 
    <nav> 
     <div class="row"> 
      <ul class="main-nav"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Quote</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </nav> 
    <div class="hero-text-box"> 
     <img src="img/test.png" width="500px" height="500px" alt="test"> 
     <a class="btn" href="#">Get a Quick Quote</a> 
    </div> 
</header> 

header { 
background-image: url(img/hero2.jpg); 
background-size: cover; 
background-position: center; 
height: 100vh; 
} 

.hero-text-box { 
position: absolute; 
width: 1140px; 
top: 20%; 
left: 60%; 
}

來源

2016-04-27 Austin Kelly

發佈一些幫助代碼 – mlegg

請問您可以重新填寫一下您的問題嗎？ – Auguste

我試圖張貼jsfiddle，但我有問題的圖像。有一個背景圖片，沒有填充標題和徽標是一個PNG，但有一個黑色背景圍繞它 –

有幾種定位元素的方法。既然你沒有指定你想要的按鈕位置，我會假定你想讓它居中。這樣做的一個簡單（並向下兼容）的方法是：

.button { 
    position: absolute; 
    left: 50%; 
    width: 50px; 
    margin-left: -25px; 
}

我們使用的是負利潤率的原因是因爲定位是左對齊，這意味着頂部：0和左：0在左上角的元素。因此，當我們離開時：50％，如果我們希望元素居中，則偏移25多個像素。

確保按鈕元素沒有任何具有位置屬性的父項。如果按鈕的父元素確實具有位置屬性，則它會將按鈕元素相對於該父元素放置。希望這對你有所幫助，歡呼。

來源

2016-04-27 20:44:05

我認爲這會做到這一點。

.hero-text-box { 
    position: absolute; 
    width: 100%; 
    height:100% 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    z-index:1; 
    top: 0; 
    left:0; 
}

來源

2016-04-28 06:43:43

定位一個不在屏幕上的鏈接（按鈕）

回答

相關問題