Я пытаюсь отобразить «ссылку» на верхней части div (ccontainer) с фоновым изображением. Он работает с положением: абсолютным, но с положением: относительное исчезает. Мне интересно, почему это так, как хотелось бы, чтобы кнопка была относительно div.Центрирование кнопки на фоновом изображении
Мой другой вопрос: как я могу сделать свой «критерий» div после (ниже) моего «контентного» div. Я сделал свое фоновое изображение прозрачным и может видеть, что серый цвет фона «совпадения» перекрывается сзади.
body
{
\t margin: 0;
\t padding: 0;
\t background-color: #999;
}
.header
{
\t z-index:3;
\t position:fixed;
\t background-color:#2B193E;
\t border:0px solid #ffffff;
\t height:70px;
\t left:0;
\t width:100%;
\t top:0;
\t /*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.hcontainer
{
\t position: relative;
\t width:100%;
}
.headingtext
{
\t color: #ffffff;
\t text-align: center;
\t width: 100%;
}
.content
{
\t z-index:1;
\t position: absolute;
\t top:0;
\t left:0;
\t height: 100%;
\t width: 100%;
\t padding:0px 0px;
}
.ccontainer
{
\t height: 100%;
\t width: 100%;
\t background:url(my.jpg);
\t background-position: center center;
\t background-repeat: no-repeat;
\t background-attachment: fixed;
\t opacity: 0.9;
\t background-size: 100% 100%;
}
.scontent
{
\t width: 100%;
\t height: 2000px;
\t padding:0px 0px;
}
.sccontainer
{
\t width: 100%;
\t height: 100%;
\t background-color: #444444;
}
.footer
{
\t z-index:2;
\t background: #2B193E;
\t position: fixed;
\t bottom:0;
\t height:5em;
\t width: 100%;
\t padding: 0em 0em;
\t /*Opacity start*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=80);
-moz-opacity: 0.80;
-khtml-opacity: 0.8;
opacity: 0.7;
/*Opacity end*/
}
.fcontainer
{
\t position:relative;
\t color: #fff;
\t text-align: center;
\t top: 40%;
}
.btn
{
\t position: absolute;
\t width: 150px; \t
\t margin-left:-75px;
\t left: 50%;
\t bottom:200px;
\t display: inline-block;
\t padding: 5px;
\t color: #ffffff;
\t border: 2px solid #fff;
\t border-radius: 5px;
\t text-align: center;
\t outline: none;
\t text-decoration: none;
\t transition: background-color 0.2s ease-out,
\t color 0.2s ease-out;
}
.btn:hover, .btn:focus, .btn:active {
\t background-color: #fff;
\t color: #000;
\t transition: background-color 0.3s ease-in,
\t \t \t color 0.3s ease-in;
}<body class="body">
<div class="header">
<div class="hcontainer">
<h1 class="headingtext">Poise for victory!</h1>
</div>
</div>
<div class="content">
<div class="ccontainer">
<a href="http://www.google.com" class="btn"> Submit!</a>
</div>
</div>
<div class="scontent">
<div class="sccontainer"></div>
</div>
<footer class="footer">
<div class="fcontainer">
MADE <em class="calluna">in</em> USA
</div>
</footer>
</body>* Edit: Вот некоторые изображения, иллюстрирующие то, что я имею в виду. Слева - это то, как я хочу иметь макет, а тот, который справа, - это то, как сейчас. На втором изображении показано, как серый фон перекрывает фоновое изображение сзади. Также я использую z-index, чтобы сохранить верхний и нижний колонтитулы над 2-мя содержимыми.
Вы делаете некоторые шаткие вещи в вашем CSS, и я не совсем понимаю, что вы имеете в виду или то, что вы пытаетесь сделать. Если вы можете воссоздать проблему на http://codepen.io/pen и/или показать изображение того, что вы пытаетесь сделать или лучше объяснить, я могу помочь – Vall3y
Где вы хотите, чтобы кнопка отображалась? –
просто удалите все абсолютные позиции и z-индексы из кода выше, чтобы начать, чтобы вы могли попасть на дорожку. – imGaurav