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