한 div를 다른 div 위에 기계하는 방법

ProgramingTip

한 div를 다른 div 위에 기계하는 방법

bestdevel 2020. 9. 28. 09:38

한 div를 다른 div 위에 기계하는 방법

한 개인 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같이 S, 난 장소 수하지만있는 방법을 알 필요가 div#infoiover- 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.

허용되는 솔루션은 훌륭하게 작동하지만 IMO에는 작동하는 이유에 대한 설명이 없습니다. 아래 예제는 기본 사항으로 요약되어 중요 CSS를 관련없는 스타일링 CSS와 분리합니다. 개체로 CSS 포지셔닝이 작동하는 방식에 대한 자세한 설명도 포함했습니다.

TLDR; 코드 만 원할 경우 결과로 스크롤하십시오 .

문제

두 개의 분리 된 형제 요소가 모든 목표는 두 번째 요소 ( idof infoi)를 배치하여 이전 요소 ( classof 가있는 요소) 서열 표시하는 것 입니다 navi. HTML 구조는 없습니다.

제안 된 해법

원하는 결과를 위해 두 번째 요소를 이동하거나 배치 할 것입니다. 두 번째 요소는이라고 부를 #infoi첫 번째 요소에서 발현되는 호출 .navi합니다. 우리 특히 #infoi는의 오른쪽 상단 모서리에 배치 하려고 합니다 .navi.

CSS 위치 필수 지식

CSS에는 위치 지정 요소에 대한 몇 가지 가지 속성이 있습니다. 기본적으로 모든 요소는 position: static입니다. 이는 제외하고 HTML 구조의 순서에 따라 배치하는 것을 의미합니다.

다른 position값은 relative, absolute하고 fixed. 요소 position를이 세 가지 값 중 하나로 설정하면 이제 다음 네 가지 속성의 조합을 사용하여 요소를 배치 할 수 있습니다.

top
right
bottom
left

즉,을 설정 하여 페이지 상단에서 100 픽셀 위치에 요소를 position: absolute추가 할 수 있습니다 top: 100px. 표시 설정 bottom: 100px하면 요소가 페이지 하단에서 100 픽셀 위치에 배치됩니다.

여기에 많은 CSS의 신참이 지워지 어디 -position: absolute참조 프레임이 있습니다. 위의 예에서 참조 프레임은body요소입니다. position: absolutewithtop: 100px는 요소가 요소 상단에서 100 픽셀 곳에 위치 함을의미합니다body.

참조 위치 프레임 또는 위치 리조트 position는 상위 요소의를 이외의 값으로position: static 설정하여 설명 수 있습니다 . 즉, 부모 요소를 제공하여 새 위치 시뮬레이션을 만들 수 있습니다.

position: absolute;
position: relative;
position: fixed;

예를 들어 <div class="parent">요소가 주어진 경우 position: relative모든 하위 요소는 <div class="parent">을 위치로 사용합니다 . 마이너 요소가 때문에 주어진 경우 position: absolute와 top: 100px, 소자는 상단에서 100 개 픽셀에 위치하게 될 것입니다 <div class="parent">(가), 소자를 <div class="parent">현재 위치 상황이다.

알아야 할 다른 요소 는 스택 순서 또는 요소가 z 방향으로 스택되는 방식입니다. 여기서 필요한 것은 스택 순서가 기본적으로 HTML 구조에서 순서의 역순으로 정의 할 것입니다. 다음 예를 고려하십시오.

<body>
  <div>Bottom</div>
  <div>Top</div>
</body>

이 예에서 두 <div>요소가 페이지의 같은 위치에있는 경우 <div>Top</div>요소가 요소를 덮습니다 <div>Bottom</div>. HTML 구조에서 <div>Top</div>뒤 따르는 기 때문에 <div>Bottom</div>스택 순서가 더 많이 사용됩니다.

div {
  position: absolute;
  width: 50%;
  height: 50%;
}

#bottom {
  top: 0;
  left: 0;
  background-color: blue;
}

#top {
  top: 25%;
  left: 25%;
  background-color: red;
}

<div id="bottom">Bottom</div>
<div id="top">Top</div>

스택 순서는 z-index또는 order속성을 사용하여 CSS로 사용 가능 합니다.

요소의 자연스러운 HTML 구조는 표시하려는 요소가 top다른 요소 다음 에 오는 것을 의미하는 것이 문제에서 스택 순서를 무시할 수 있습니다 .

따라서 당면한 문제로 돌아가서 위치가 사용하여 문제를 해결할 것입니다.

해결책

언급 된 바와 같이 우리의 목표는 #infoi요소 서열 표시 요소 를 배치하는 것 .navi입니다. 이를 위해 새 위치 합성을 만들 수있는 새 요소에 .navi및 #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.

결과

아래의 예는 기본 사항으로 포함되어 있습니다.

/*
*  position: relative gives a new position context
*/
.wrapper {
  position: relative;
}

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: absolute;
  top: 0;
  right: 0;

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="wrapper">
  <div class="navi"></div>
  <div id="infoi">
    <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
  </div>
</div>

대체 (래퍼 없음) 솔루션

HTML을 편집 할 수없는 경우 (래퍼 요소를 추가 할 수 없음) 원하는 효과를 얻을 수 있습니다.

요소 에 사용 position: absolute하는 대신 . 이를 통해 요소 아래의 기본 위치에서 요소의 위치를 사용할 수 있습니다 . 통해이를 음수 값을 사용하여 기본 위치에서 위로 이동 하고을 사용하여 마이너스 몇 픽셀 값을 사용 하여 오른쪽 근처에 배치 할 수 있습니다.#infoiposition: relative#infoi.naviposition: relativetopleft100%left: calc(100% - 52px)

/*
*  The .navi properties are for styling only
*  These properties can be changed or removed
*/
.navi {
  background-color: #eaeaea;
  height: 40px;
  width: 100%;
}


/*
*  Position the #infoi element in the top-right
*  of the .wrapper element
*/
#infoi {
  position: relative;
  display: inline-block;
  top: -40px;
  left: calc(100% - 52px);

  /*
  *  Styling only, the below can be changed or removed
  *  depending on your use case
  */
  height: 20px;
  padding: 10px 10px;
}

<div class="navi"></div>
<div id="infoi">
  <img src="http://via.placeholder.com/32x20/000000/ffffff?text=?" height="20" width="32"/>
</div>

사용하여를 div스타일 z-index:1;과 position: absolute;당신이 당신을 오버레이 할 수 div다른에 div.

z-indexdiv가 '스택'되는 순서를 결정합니다. 더 높은 z-indexdiv가 더 낮은 div가 나타납니다 z-index. 이 속성 은 배치 된 요소에서만 작동합니다 .

다음은 CSS를 기반으로 한 100 % 간단한 솔루션입니다. "비밀"은 display: inline-block래퍼 요소에서 를 사용하는 것 입니다. 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>

새로운 Grid CSS 사양은 훨씬 더 우아한 솔루션을 제공합니다. 사용하면 position: absolute겹침 또는 크기 조정 문제가있을 수 있습니다. Grid는 더러운 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 전문가도 아니지만 웹 디자인에서 여전히 당신의 아이디어를 사용하고 있습니다. 나는 다른 해결책도 시도했다.

#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

참고 URL : https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div

'ProgramingTip' 카테고리의 다른 글

출력을 파일 및 stdout으로 리디렉션하는 방법 (0)	2020.09.28
JavaScript에서 정의되지 않은 변수를 확인하는 방법 (0)	2020.09.28
임의의 영숫자 노드를 생성해야합니까? (0)	2020.09.28
Git : 로컬 브랜치 만 비용은 어떻게합니까? (0)	2020.09.28
마스터 브랜치와 '원산지 / 마스터'가 갈라 졌는데 어떻게 브랜치를 '해제'할까요? (0)	2020.09.28

현재글한 div를 다른 div 위에 기계하는 방법

bestdevel

한 div를 다른 div 위에 기계하는 방법

한 div를 다른 div 위에 기계하는 방법

문제

제안 된 해법

CSS 위치 필수 지식

해결책

결과

대체 (래퍼 없음) 솔루션

'ProgramingTip' 카테고리의 다른 글

'ProgramingTip'의 다른글

티스토리툴바

한 div를 다른 div 위에 기계하는 방법

한 div를 다른 div 위에 기계하는 방법

문제

제안 된 해법

CSS 위치 필수 지식

해결책

결과

대체 (래퍼 없음) 솔루션

'ProgramingTip' 카테고리의 다른 글

'ProgramingTip'의 다른글

관련글

티스토리툴바