배경 이미지가있는 div (ccontainer) 위에 "링크 버튼"을 표시하려고합니다. position : absolute에서는 작동하지만 position : relative에서는 사라집니다. 버튼이 div에 상대적인 이유가 궁금합니다.
내 다른 질문은 어떻게 "scontent"div가 "contnent"div 뒤에 오도록 만들 수 있는가입니다. 내 배경 이미지를 투명하게 만들고 뒤에서 겹치는 "scontent"회색 배경색을 볼 수 있습니다.
body
{
margin: 0;
padding: 0;
background-color: #999;
}
.header
{
z-index:3;
position:fixed;
background-color:#2B193E;
border:0px solid #ffffff;
height:70px;
left:0;
width:100%;
top:0;
/*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
{
position: relative;
width:100%;
}
.headingtext
{
color: #ffffff;
text-align: center;
width: 100%;
}
.content
{
z-index:1;
position: absolute;
top:0;
left:0;
height: 100%;
width: 100%;
padding:0px 0px;
}
.ccontainer
{
height: 100%;
width: 100%;
background:url(my.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.9;
background-size: 100% 100%;
}
.scontent
{
width: 100%;
height: 2000px;
padding:0px 0px;
}
.sccontainer
{
width: 100%;
height: 100%;
background-color: #444444;
}
.footer
{
z-index:2;
background: #2B193E;
position: fixed;
bottom:0;
height:5em;
width: 100%;
padding: 0em 0em;
/*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
{
position:relative;
color: #fff;
text-align: center;
top: 40%;
}
.btn
{
position: absolute;
width: 150px;
margin-left:-75px;
left: 50%;
bottom:200px;
display: inline-block;
padding: 5px;
color: #ffffff;
border: 2px solid #fff;
border-radius: 5px;
text-align: center;
outline: none;
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.btn:hover, .btn:focus, .btn:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
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>* 편집 : 내가 의미하는 바를 보여주는 이미지가 있습니다. 왼쪽은 내가 원하는 레이아웃이고 오른쪽은 현재 상태입니다. 두 번째 이미지는 회색 배경이 뒤에서 배경 이미지와 겹치는 방식을 보여줍니다. 또한 z-index를 사용하여 두 콘텐츠 위에 머리글과 바닥 글을 유지합니다.
도와 주셔서 감사합니다. 문제는 요소의 위치였습니다. 이제 "정적"기본 및 상대 위치 만 사용합니다. 이 사이트는 Z- 인덱싱뿐만 아니라 일반 레이아웃에도 도움 이 되었습니다. HTML은 동일하게 유지되었지만 CSS는 참조를 위해 아래에 표시됩니다. 나는 또한 많은 도움이 된 html과 body에 100 % 너비와 높이를 추가했습니다.
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
/* font: 1em/1.2 "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
*/
}
.header {
position:fixed;
height:5em;
width:100%;
z-index:3;
background-color:#2B193E;
/*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 {
height: 100%;
}
.headingtext {
position: relative;
top: .5em;
text-align: center;
color: #ffffff;
}
.content {
height: 100%;
background:url(http://www.minimit.com/images/picjumbo.com_IMG_6648.jpg) no-repeat center center fixed;
background-size: 100% 100%;
}
.ccontainer {
border: 1px dashed #669966;
position: relative;
width:40%;
height:40%;
left:30%;
top:50%;
}
.scontent {
height: 1500px;
background:url(mypicture.jpg) no-repeat center center fixed;
opacity: 0.4;
background-size: 100% 100%;
}
.sccontainer {
height: 100%;
width: 100%;
}
.footer {
position: fixed;
height:3em;
width: 100%;
bottom:0em;
z-index:2;
background: #2B193E;
padding: 0em 0em;
/*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 {
position: relative;
top:1em;
text-align: center;
color: #ffffff;
}
/* -----------------------
Single styles
------------------------*/
.infotable {
position: relative;
border: 1px dashed #ffffff;
width: 70%;
margin-bottom:0px;
top: 50%;
left:15%;
}
.btn {
border: 20px dashed #000000;
position: relative;
left:50%;
top:-50%;
width: 150px;
margin-left:-75px;
display: inline-block;
padding: 5px;
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 5px;
text-align: center;
/* outline: none;*/
text-decoration: none;
transition: background-color 0.2s ease-out,
color 0.2s ease-out;
}
.btn:hover, .btn:focus, .btn:active {
background-color: #fff;
color: #000;
transition: background-color 0.3s ease-in,
color 0.3s ease-in;
}이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다