單擊目標區域重疊在目標上

我有4個簡單的img和h4，它們是針對第三方鏈接的。類projectImage2重疊的其他3和多頁的是有針對性地點擊單擊目標區域重疊在目標上

<a href="https://eliottenos.github.io/eliott-game/"<div class="game"<h4>Game Application</h4></div></a> 

<a href="https://github.com/eliottenos/filebucket-client"><img class="projectImage2"src="http://i.imgur.com/iiGiuX7.png" 
title="FileBucket Application" /></a> 

<a href="https://eliottenos.github.io/filebucket-client/"><div 
    class="fileBucket"><h4>FileBucket Application</h4></div></a> 

    <a href="https://github.com/eliottenos/eliott-game"><img 
    class="projectImage1"src="http://i.imgur.com/iiGiuX7.png" title="Game 
    Application" /></a>

我是認爲這可能是關閉扔它是CSS的唯一的事？

.game { 
    position: absolute; 
    padding-left: 250px; 
    padding-right: 250px; 
    padding-top: 130px; 
} 

.fileBucket { 
    position: absolute; 
    padding-left: 250px; 
    padding-right: 250px; 
    padding-top: 200px; 
} 

.projectImage2 { 
    height: auto; 
    width: auto; 
    top: 450px; 
    left: 440px; 
    max-width: 100px; 
    max-height: 70px; 
    position: absolute; 
    display: inline; 
} 

.projectImage1 { 
    height: auto; 
    width: auto; 
    top: 380px; 
    left: 440px; 
    max-width: 100px; 
    max-height: 70px; 
    position: absolute; 
    display: inline; 
}

來源

2017-08-09 eliottenos

對不起，我不明白這個問題沒有看到你的意思，你可以複製問題或創建一個codepen或類似的演示？ – Mindless

好吧，我可以告訴你，問題肯定與位置：絕對的，但我們不能看到整個圖片，或爲什麼你需要的位置：絕對。 – Mindless

@Mindless所以我做了一個codepen似乎沒有正確顯示，但你會明白爲什麼我使用絕對 - > https://codepen.io/eliottenos/pen/MvmwZw要得到更好地瞭解它被部署到eliottenos.com – eliottenos

所以我有一個適當的看，這個問題不僅是鏈接，但你的HTML是如何構成的，還有位置：在幾乎一切絕對的，所以一切都是重疊的一切，我會強烈建議您使用引導模板作爲開始，您可以使用引導程序輕鬆設置列和行，並且它會響應。我試圖把鏈接放在正確的位置，但是因爲你有位置：對所有東西都是絕對的，所以我將不得不改變html的佈局方式，例如，在html的另一部分下方彈出一些東西的內容。

你不得不認爲你的html爲水平行，如果它們是左或右，如果它們出現在同一行上，將它放在一個div下並不重要。

例如，對於您的內容與引導，你可以做這樣的事情：

<div class="row"> 
    <div class="col-md-4"> 
     Contact Details, Phone Number etc... 
    </div> 
    <div class="col-md-8"> 
     <p> 
     Fullstack Web Developer coming from a diverse, technical business background. Having worked and traveled the world, I have acquired a breadth of skill sets through different industries which has culminated in my goal of becoming a trained fullstack web developer. 
    </p> 
    <ul class="main"> 
     <li>Write HTML, CSS, and JavaScript for displays in contemporary browsers with responsive design practices</li> 
     <li>Develop back-end web applications and APIs using a modern programming languages and MVC web development framework</li> 
     <li>Collaborate with teams using an agile development workflow and widely-accepted collaboration practices using Git and GitHub for version control</li> 
     <li>Improve and demonstrate web development skill-set by building a series of full-stack web applications</li> 
    </ul> 
    </div> 
</div>

凡左側佔據了4列和右側採用8列塔的總寬度總是加起來12.所以你也可以做這樣的事情。

<div class="row"> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-1"></div> 
</div>

來源

2017-08-09 03:35:14 Mindless

單擊目標區域重疊在目標上

回答

相關問題