CSS 绝对位置不定位按钮

Question

早上好！

我有一张背景图片，我正在尝试放置一些文本和一些按钮。我可以放置文本（似乎只使用填充）但无法正确放置我的按钮。我已经尝试了数十种不同的解决方法，但无法使任何工作正常进行。非常感谢任何帮助！

页面：http://tradecaptain.com/nlp 我的css/html。它不漂亮。我只是在学习。损坏的 css id 是代码末尾的 .video。

<style type="text/css">
.outer {
position: relative;
background: url(/images/LandingPageTopBlend.png);
width: 960px;
height: 300px;
}
.Line1 {
line-height: 10px;
padding-top: 50px;
text-align: center;
font-size:26px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.Line2 {
text-align: right;
padding-right: 45px;
padding-top: 15px;
font-size:10px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.Line3 {
line-height: 10px;
text-align: left;
padding-left: 45px;
padding-top: 30px;
font-size:26px;
font-family:Verdana;
font-weight: bold;
color: #fff;
}
.video {
display: block;
position: absolute;
top: 260px;
left: 100px;
}   </style>
<div class="outer">
<div class="Line1"><h1>The Simple Way to Trading Profit</h1></div>
<div class="Line2"><h1>trading forex stocks commodities futures</h1></div>
<div class="Line3"><h1>The TradeMap. Trade like a pro.</h1></div>
<div id="video">
<a href="http://www.youtube.com/watch?v=-DYkSNur2Rc" rel="lightvideo"><img alt="How to Trade Video" src="/images/WatchVideo.png" style="width: 136px; height: 34px;" /></a></div>
</div>

Answer 1

您的 CSS 选择器是 .video，它的目标是 class="video"，但您的 div 有 id="video"。将 div 更改为 <div class="video"> 或将 CSS 选择器更改为 #video.

Answer 2

您的 HTML 比需要的更复杂，您不需要将 h1 元素嵌套在 div 中。看起来您正在使用 h1 来获得大而粗的文本，但您可以直接将字体样式直接添加到 div。

您还可以通过利用 CSS 级联和分组选择器来简化 CSS，例如，.Line1, .Line2, .Line3 用于那些 CSS 规则所有线路通用。

你原来指定的line-height是10px，会出问题如果文本必须换行到 2 行或更多行。在这种情况下，您可以使用默认行高，将其设置为 10px 将一无所获。

您可以使用边距来扩大文本行之间的间距，但要防止子元素与父元素折叠的边距 .outer，应用 overflow: auto 创建块格式上下文。

您可以阅读 CSS2 规范中的块格式化上下文。

最后，要定位您的视频 link，只需使用 class 选择器 (.video) 而不是 id (#video)。您的想法是正确的，但语法错误。

.outer {
    position: relative;
    background-color: gray;
    width: 960px;
    height: 300px;
    overflow: auto; /* Start a block formatting context so that margins don't collapse */
}
.Line1, .Line2, .Line3 {
    font-size:26px;
    font-family:Verdana;
    font-weight: bold;
    color: #fff;
}
.Line1 {
    text-align: center;
    margin-top: 20px;
}
.Line2 {
    text-align: right;
    font-size: 13px;
    margin-top: 40px;
}
.Line3 {
    text-align: left;
    margin-top: 30px;
    margin-left: 30px;
}
.video {
    display: block;
    position: absolute;
    bottom: 10px;
    left: 10px;
}

<div class="outer">
    <div class="Line1">The Simple Way to Trading Profit</div>
    <div class="Line2">trading forex stocks commodities futures</div>
    <div class="Line3">The TradeMap. Trade like a pro.</div>
    <div class="video">
<a href="http://www.youtube.com/watch?v=-DYkSNur2Rc" rel="lightvideo"><img alt="How to Trade Video" src="/images/WatchVideo.png" style="width: 136px; height: 34px;" /></a>
    </div>
</div>

CSS 绝对位置不定位按钮

CSS Absolute Position Not Positioning a Button

html

css

absolute