大家好我已经简单地解决了一个困扰我很长时间的问题,下面的代码根本没有用,只是以更清晰的方式显示了问题。

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="teste.css">
  </head>
  <body>
    <div id="bar"></div>
    <span>
      Palavra
    </span>
  </body>
</html>


CSS:

#bar {
  position: relative;
  width: 100%;
  height: 7%;
  background-color: #5959AB;
  color: white;
  font-family: "Arial";
  font-size: 150%;
  font-weight: bold;
}

html, body {
  height: 100%;
}


结果是:



因此,我尝试通过向其添加填充底部来使“ Palavra”上升:

span {
  padding-bottom: 2000px;
}


结果是:



“ Palavra”只是停留在相同的精确位置,但是出现了垂直滚动条。看来“ Palavra”正在压低它的底部,因为它无法从原处升起。

这个问题以多种方式出现在我的脑海中,我的头脑已经扑朔迷离-有人可以帮忙吗?

最佳答案

有两种定位跨度的好方法。


您可以将其设置为display:block,并使用Lloyd Banks所描述的负的上边距。跨度需要从默认的内联元素更改为块元素,因为顶边距不适用于内联元素,但它确实适用于块元素。


从W3C "Margin properties specify the width of the margin area of a box. ... These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."

使用此技术,您将在div和span上需要一个z-index,因此该span将位于div的顶部,而不是在其下方滑动。 MDN z-index article

JSFiddle Example

#bar {
    position:relative;
    width:100%;
    height:25px;
    background-color:#5959AB;
    color:white;
    font-family:"Arial";
    font-size:150%;
    font-weight:bold;
    z-index:1;
}

span{
    position:relative;
    display:block;
    margin-top:-25px;
    z-index:2;
}





第二种方法是绝对定位跨度,以便将其从文档流中拉出,并放在其容器的顶部。


JSFiddle Example

span{
    position:absolute;
    top:0px;
   }




在跨度底部添加填充将通过仅在底部增加空间来增加跨度的大小/长度。它不会将跨度从其原始位置向上推,但会将其下方的元素向页面下移(因为跨度现在更大)。

在跨度中添加2000px底部填充时,其高度超过2000px,并且比浏览器窗口高,从而导致滚动条。向您的元素添加背景色是查看填充和大小调整方式的好方法。

这是W3C提供的有关包装盒模型的详细文章,其中包括边距和填充http://www.w3.org/TR/CSS21/box.html#box-margin-area

这是一篇简单的文章,其中包含“请自己尝试”示例: http://www.w3schools.com/css/css_boxmodel.asp

10-05 20:39
查看更多