如何避免这些重叠的元素

debugcn 发表于 Dev

罗伊

我想在Codepen上制作一些代码，试图适应html / css，因为我对定位不太满意。这一定是很愚蠢的，但我无法使其正常工作。

HTML：

<div id="hh">
    <h1>Wacom Hover Effect</h1>
</div>
<div id="cl">
    <a href="#" data-text="Read More" class="button-hover">Read More</a>
    <a href="#" data-text="Learn More" class="button-hover">Learn More</a>
    <a href="#" data-text="Read Article" class="button-hover">Read Article</a>
    <a href="#" data-text="Download" class="button-hover">Download</a>
</div>

CSS：

*, :before, :after{ @include box-sizing('border-box'); }
body{ padding: 1em; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #eee; }

#hh{
   position:absolute; 
   left:50%
   }

h1{
  position:relative;
  left:-50%;
  font: 300 3em/1em 'Open Sans', sans-serif;
  border: solid 0.00019em #000;
  margin-bottom: 0.2em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  background-color:lightblue;
  border-radius:0.2em;
  }
#cl{
   clear:both;
 }

.button,
 [class*="button-"]{

  position: relative;
  display: inline-block;
  overflow: hidden;
  float:left;
  margin: 0 1em 1em 0;
  padding: 0 4em;
  height: 3.5em;
  font: 300 1em/3.5em 'Open Sans', sans-serif;
  text:{
    decoration: none;
    shadow: 0 1px 3px rgba(black, .35);
   }
  letter-spacing: .08em;
  color: #fff;
  background: #0090C0;
  border: solid 1px #fff;
  border-radius: 2px;
  @include transition(.35s ease all);

}

}

之后有一些与悬停有关的不相关代码。结果是这样的：http : //codepen.io/roygbiv/full/FjLcA

所以我想将h1居中，然后在这里找到将#hh绝对值，左：50％，然后将h1相对左：-50％的方法。而且它搞砸了定位。

我想要的是h1在中心顶部，然后是其下的4个“ a”（不是中心，只是不重叠）。

尼克拉斯·尼格伦（Nicklas Nygren）

放置position: absolute一个元素会使所有其他元素将其忽略。这可以通过将得到解决display: inline-block的h1和text-align: center上#hh：

检查新笔：http：//codepen.io/anon/pen/kovaC

#hh {
  text-align: center;
}

h1{
  font: 300 3em/1em 'Open Sans', sans-serif;
  border: solid 0.00019em #000;
  margin-bottom: 0.2em;
  padding: 0.4em 0.2em 0.4em 0.2em;
  background-color:lightblue;
  border-radius:0.2em;
  display: inline-block;
}

inline-block使元素的框适应其文本的宽度。我假设标题的期望外观是让蓝色框不具有100%宽度，否则，h1和其他块元素就是这种情况。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。