单击目标区域重叠在目标上

我有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

单击目标区域重叠在目标上

回答

相关问题