한 개인 div을 다른 개인 위에 오버레이하는 데 도움이 필요합니다 div.
내 코드는 다음과 같습니다
<div class="navi"></div>
<div id="infoi">
<img src="info_icon2.png" height="20" width="32"/>
</div>
불행하게도, 난 중첩 할 수 없습니다 div#infoi또는 img최초의 내부 div.navi.
div그림과 같이 두 개의 별도이어야 하지만, 가장 div#infoi위에 div.navi가장 오른쪽에 배치하고을 중심으로 하는 방법을 알아야합니다 div.navi.
답변:
#container {
width: 100px;
height: 100px;
position: relative;
}
#navi,
#infoi {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#infoi {
z-index: 10;
}<div id="container">
<div id="navi">a</div>
<div id="infoi">
<img src="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
</div>
</div>position: relative와 함께 및 하위 요소 에 대해 배우는 것이 좋습니다 position: absolute.
absolute배치 된 요소는 가장 가까운 명시 적으로 배치 된 ( position:absolute|relative|fixed) 부모 요소를 기준 으로 배치 됩니다. 단지 더 명확한 ... jsfiddle.net/p5jkc8gz
수용된 솔루션은 훌륭하게 작동하지만 IMO는 왜 작동하는지에 대한 설명이 부족합니다. 아래 예제는 기본 사항으로 요약되어 있으며 중요한 CSS를 관련없는 스타일링 CSS와 분리합니다. 보너스로 CSS 포지셔닝 작동 방식에 대한 자세한 설명도 포함했습니다.
TLDR; 코드 만 원하는 경우 아래로 스크롤하여 결과로 이동하십시오 .
두 개의 개별 형제 요소가 있으며 목표는 두 번째 요소 ( idof infoi)를 배치하는 것이므로 이전 요소 ( classof navi)에 표시됩니다. HTML 구조는 변경할 수 없습니다.
원하는 결과를 얻기 위해 두 번째 요소를 이동하거나 배치합니다. 두 번째 요소 #infoi는 첫 번째 요소 내에 표시됩니다 .navi. 구체적 #infoi으로의 오른쪽 상단 모서리에 배치 하려고 합니다 .navi.
CSS에는 요소 배치를위한 여러 속성이 있습니다. 기본적으로 모든 요소는 position: static입니다. 즉, 요소는 HTML 구조에서 순서에 따라 배치되지만 거의 예외는 없습니다.
다른 position값은 relative, absolute, sticky,와 fixed. 요소 position를 다른 값 중 하나로 설정하면 다음 네 가지 속성 조합을 사용하여 요소를 배치 할 수 있습니다.
toprightbottomleft즉,를 설정 하면 페이지 상단에서 요소를 100 픽셀 떨어진 위치에 position: absolute추가 할 수 있습니다 top: 100px. 반대로, 우리가 설정 bottom: 100px하면 요소는 페이지 하단에서 100 픽셀에 위치합니다.
여기에 많은 CSS 초보자가 잃어버린 곳이 있습니다 -position: absolute참조 프레임이 있습니다. 위의 예에서 참조 프레임은body요소입니다. position: absolutewithtop: 100px는 요소가 요소 상단에서 100 픽셀 떨어진 곳에 있음을의미합니다body.
position부모 요소의 값을 이외의 값position: static 으로 설정하여 위치 참조 프레임 또는 위치 컨텍스트를 변경할 수 있습니다 . 즉, 부모 요소를 제공하여 새 위치 컨텍스트를 만들 수 있습니다.
position: relative;position: absolute;position: sticky;position: fixed;예를 들어, <div class="parent">요소가 제공 position: relative되면 모든 하위 요소 <div class="parent">가 위치 컨텍스트로 사용 됩니다. 자식 요소에 position: absolute및 이 지정된 top: 100px경우 요소 는 이제 위치 컨텍스트 <div class="parent">이므로 요소 의 상단에서 100 픽셀 떨어진 <div class="parent">위치에 배치됩니다.
알아야 할 다른 요소 는 스택 순서 또는 요소가 z 방향으로 쌓이는 방식입니다. 여기서 반드시 알아야 할 것은 요소의 스택 순서는 기본적으로 HTML 구조에서 순서의 역순으로 정의됩니다. 다음 예제를 고려하십시오.
<body>
<div>Bottom</div>
<div>Top</div>
</body>
이 예에서 두 <div>요소가 페이지의 동일한 위치에 있으면 요소가 해당 <div>Top</div>요소를 덮습니다 <div>Bottom</div>. 때문에 <div>Top</div>뒤에 오는 <div>Bottom</div>HTML 구조에 더 높은 스택 순서가 있습니다.
CSS를 사용하여 z-index또는 order속성을 사용하여 스택 순서를 변경할 수 있습니다 .
요소의 자연적인 HTML 구조는 우리가 표시하고자하는 요소가 top다른 요소 뒤에 오는 것을 의미하므로이 문제에서 쌓인 순서를 무시할 수 있습니다 .
따라서 당면한 문제로 돌아가서-이 문제를 해결하기 위해 위치 컨텍스트를 사용합니다.
위에서 언급했듯이 우리의 목표는 #infoi요소가 .navi요소 내에 나타나도록 요소 를 배치하는 것 입니다. 이를 위해, .naviand #infoi요소를 새로운 요소로 감싸서 <div class="wrapper">새로운 위치 컨텍스트를 만들 수 있습니다.
<div class="wrapper">
<div class="navi"></div>
<div id="infoi"></div>
</div>
그런 다음 제공함으로써 새로운 위치 문맥 만들 .wrapper을 position: relative.
.wrapper {
position: relative;
}
이 새로운 위치 문맥, 우리는 위치를 지정할 수 있습니다 #infoi내 .wrapper. 먼저, 줄 #infoi을 position: absolute위치로 우리를 허용, #infoi절대적으로 .wrapper.
그런 다음 요소 를 추가 top: 0하여 오른쪽 상단 모서리에 배치하십시오. 요소가 위치 컨텍스트로 사용 되므로 요소의 오른쪽 상단에 있습니다 .right: 0#infoi#infoi.wrapper.wrapper
#infoi {
position: absolute;
top: 0;
right: 0;
}
있으므로 .wrapper단순히하는 컨테이너 .navi의 위치, #infoi오른쪽 상단의 .wrapper오른쪽 상단에 위치되는 효과를 제공한다 .navi.
그리고 우리는 그것을 가지고 있습니다. #infoi이제 오른쪽 상단 모서리에있는 것 같습니다 .navi.
아래 예제는 기본 사항으로 요약되어 있으며 최소한의 스타일이 포함되어 있습니다.
CSS Grid를 사용 하여 가장 오른쪽에있는 .navi요소와 요소 를 배치하는 대체 솔루션이 #infoi있습니다. 자세한 grid속성을 사용하여 최대한 명확하게 만들었습니다.
HTML을 편집 할 수없는 경우 래퍼 요소를 추가 할 수 없으므로 원하는 효과를 얻을 수 있습니다.
요소 를 사용 position: absolute하는 대신을 사용 #infoi합니다 position: relative. 이를 통해 #infoi요소 아래의 기본 위치에서 요소 를 재배치 할 수 있습니다 .navi. 함께 position: relative우리는 부정적인를 사용할 수있는 top기본 위치, 그리고에서 위로 이동하려면 값을 left값 100%사용, 마이너스 몇 픽셀 left: calc(100% - 52px), 오른쪽 근처에 위치합니다.
를 사용하여 div스타일 z-index:1;과 position: absolute;당신이 당신을 오버레이 할 수 div다른에 div.
z-indexdiv가 '스택'되는 순서를 결정합니다. 더 높은 z-indexdiv는 더 낮은 div 앞에 나타납니다 z-index. 이 속성 은 위치 지정된 요소에서만 작동합니다 .
새로운 그리드 CSS 사양은 훨씬 더 우아한 솔루션을 제공합니다. 사용 position: absolute그리드 더러운 CSS 해킹에서 당신을 저장합니다 동안 중복 또는 스케일링 문제가 발생할 수 있습니다.
가장 작은 그리드 오버레이 예 :
HTML
<div class="container">
<div class="content">This is the content</div>
<div class="overlay">Overlay - must be placed under content in the HTML</div>
</div>CSS
.container {
display: grid;
}
.content, .overlay {
grid-area: 1 / 1;
}그게 다야. Internet Explorer 용으로 빌드하지 않으면 코드가 작동 할 것입니다.
다음은 CSS를 기반으로 한 간단한 솔루션 100 %입니다. "비밀"은 display: inline-blockin 래퍼 요소 를 사용하는 것 입니다. vertical-align: bottom이미지의 일부 브라우저는 요소 뒤에 추가하는 4 픽셀의 패딩을 극복하기 위해 해킹입니다.
조언 : 래퍼 앞의 요소가 인라인 인 경우 중첩 될 수 있습니다. 이 경우 컨테이너 내부에 "래퍼를 포장"할 수 있습니다 . display: block일반적으로 좋고 오래되었습니다 div.
.wrapper {
display: inline-block;
position: relative;
}
.hover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 188, 212, 0);
transition: background-color 0.5s;
}
.hover:hover {
background-color: rgba(0, 188, 212, 0.8);
// You can tweak with other background properties too (ie: background-image)...
}
img {
vertical-align: bottom;
}<div class="wrapper">
<div class="hover"></div>
<img src="http://placehold.it/450x250" />
</div>이것이 당신이 필요로하는 것입니다 :
function showFrontLayer() {
document.getElementById('bg_mask').style.visibility='visible';
document.getElementById('frontlayer').style.visibility='visible';
}
function hideFrontLayer() {
document.getElementById('bg_mask').style.visibility='hidden';
document.getElementById('frontlayer').style.visibility='hidden';
}#bg_mask {
position: absolute;
top: 0;
right: 0; bottom: 0;
left: 0;
margin: auto;
margin-top: 0px;
width: 981px;
height: 610px;
background : url("img_dot_white.jpg") center;
z-index: 0;
visibility: hidden;
}
#frontlayer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 70px 140px 175px 140px;
padding : 30px;
width: 700px;
height: 400px;
background-color: orange;
visibility: hidden;
border: 1px solid black;
z-index: 1;
}
</style><html>
<head>
<META HTTP-EQUIV="EXPIRES" CONTENT="-1" />
</head>
<body>
<form action="test.html">
<div id="baselayer">
<input type="text" value="testing text"/>
<input type="button" value="Show front layer" onclick="showFrontLayer();"/> Click 'Show front layer' button<br/><br/><br/>
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text
<div id="bg_mask">
<div id="frontlayer"><br/><br/>
Now try to click on "Show front layer" button or the text box. It is not active.<br/><br/><br/>
Use position: absolute to get the one div on top of another div.<br/><br/><br/>
The bg_mask div is between baselayer and front layer.<br/><br/><br/>
In bg_mask, img_dot_white.jpg(1 pixel in width and height) is used as background image to avoid IE browser transparency issue;<br/><br/><br/>
<input type="button" value="Hide front layer" onclick="hideFrontLayer();"/>
</div>
</div>
</div>
</form>
</body>
</html>CSS의 코더 나 전문가는 아니지만 웹 디자인에서 여전히 아이디어를 사용하고 있습니다. 나는 다른 해결책을 시도했다.
#wrapper {
margin: 0 auto;
width: 901px;
height: 100%;
background-color: #f7f7f7;
background-image: url(images/wrapperback.gif);
color: #000;
}
#header {
float: left;
width: 100.00%;
height: 122px;
background-color: #00314e;
background-image: url(images/header.jpg);
color: #fff;
}
#menu {
float: left;
padding-top: 20px;
margin-left: 495px;
width: 390px;
color: #f1f1f1;
}<div id="wrapper">
<div id="header">
<div id="menu">
menu will go here
</div>
</div>
</div>물론 둘 다에 래퍼가 있습니다. 왼쪽 여백과 상단 위치로 헤더 div 내에 표시 될 메뉴 div의 위치를 제어 할 수 있습니다. 원하는 경우 div 메뉴를 부동으로 설정할 수도 있습니다.
다음은 다른 div에 로딩 아이콘이있는 오버레이 효과를 가져 오는 간단한 예입니다.
<style>
#overlay {
position: absolute;
width: 100%;
height: 100%;
background: black url('icons/loading.gif') center center no-repeat; /* Make sure the path and a fine named 'loading.gif' is there */
background-size: 50px;
z-index: 1;
opacity: .6;
}
.wraper{
position: relative;
width:400px; /* Just for testing, remove width and height if you have content inside this div */
height:500px; /* Remove this if you have content inside */
}
</style>
<h2>The overlay tester</h2>
<div class="wraper">
<div id="overlay"></div>
<h3>Apply the overlay over this div</h3>
</div>여기에서 시도하십시오 : http://jsbin.com/fotozolucu/edit?html,css,output
overflow: hidden, 사용overflow: visible대신.