HTML & CSS 중첩 순서 지정하기
개시하다
CSS용 z-idex 사용
"예를 들어 Power의 맨 앞, 앞으로 이동"등 간단하게 중첩 순서를 지정하는 방법을 총괄했다.
한편 지난번'rgba를 사용하여 배경 이미지를 어둡게 했다'는 보도는 계속되고 있다.
https://qiita.com/szaizen/items/3ab28c03a76e08bb5581
z-index
z-idex는 원소의 중첩 순서를 결정할 수 있는 속성이다.test {
z-index: 数字;
}
숫자가 지정하는 값이 클수록 위에 표시됩니다.
이것만 사용하면 간단하게 중첩 순서를 지정할 수 있을 거예요.
이어서 실천해 봅시다.
실천 예
html<body>
<div class="back">
<h1 class="title">パソコン教室</h1>
<p>Learn together!</p>
</div>
</body>
cssbody{
height: 100%;
margin: 0;
}
.back{
/* 画面いっぱいに背景画像を貼り付ける */
background: url(http://simplemodern-interior.jp/knowledge/wp-content/uplads/2014/07/pc.png) no-repeat center;
background-size: cover;
position: relative;
height:100%;
}
.back::before{
/* 透過した黒を上から重ねるイメージ */
background-color: rgba(0,0,0,0.4);
/* 自由に位置指定 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
지난번에 rgba를 사용하여 배경 그림을 어둡게 했습니다.
그런데 글도 어두워져서 잘 안 보여서 맨 앞에 놓으려고 했어요.
position: absolute;
css.title{
position: absolute;
width: 100%;
text-align: center;
}
이렇게 기술하다.
이 경우 앞에 순서대로 올바르게 표시되지만 HTML은 다음과 같은 경우 배경 이미지로 둘러싸여 표시되지 않습니다.
html<body>
<h1 class="title">パソコン教室</h1>
<div class="back">
<p>Learn together!</p>
</div>
</body>
z-idex로 겹치는 순서 지정하기
거기에 등장하는 것은 z-idex다.
참고로 포지션은 기본static에 적용되지 않습니다.
따라서 z-idex가 추가되면
css.title{
position: absolute;
width: 100%;
text-align: center;
/* 重なり順を指定*/
z-index: 1;
}
잘 나왔어!!!
사이트 축소판 그림
z-idex는 원소의 중첩 순서를 결정할 수 있는 속성이다.
test {
z-index: 数字;
}
이것만 사용하면 간단하게 중첩 순서를 지정할 수 있을 거예요.
이어서 실천해 봅시다.
실천 예
html<body>
<div class="back">
<h1 class="title">パソコン教室</h1>
<p>Learn together!</p>
</div>
</body>
cssbody{
height: 100%;
margin: 0;
}
.back{
/* 画面いっぱいに背景画像を貼り付ける */
background: url(http://simplemodern-interior.jp/knowledge/wp-content/uplads/2014/07/pc.png) no-repeat center;
background-size: cover;
position: relative;
height:100%;
}
.back::before{
/* 透過した黒を上から重ねるイメージ */
background-color: rgba(0,0,0,0.4);
/* 自由に位置指定 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
지난번에 rgba를 사용하여 배경 그림을 어둡게 했습니다.
그런데 글도 어두워져서 잘 안 보여서 맨 앞에 놓으려고 했어요.
position: absolute;
css.title{
position: absolute;
width: 100%;
text-align: center;
}
이렇게 기술하다.
이 경우 앞에 순서대로 올바르게 표시되지만 HTML은 다음과 같은 경우 배경 이미지로 둘러싸여 표시되지 않습니다.
html<body>
<h1 class="title">パソコン教室</h1>
<div class="back">
<p>Learn together!</p>
</div>
</body>
z-idex로 겹치는 순서 지정하기
거기에 등장하는 것은 z-idex다.
참고로 포지션은 기본static에 적용되지 않습니다.
따라서 z-idex가 추가되면
css.title{
position: absolute;
width: 100%;
text-align: center;
/* 重なり順を指定*/
z-index: 1;
}
잘 나왔어!!!
사이트 축소판 그림
<body>
<div class="back">
<h1 class="title">パソコン教室</h1>
<p>Learn together!</p>
</div>
</body>
body{
height: 100%;
margin: 0;
}
.back{
/* 画面いっぱいに背景画像を貼り付ける */
background: url(http://simplemodern-interior.jp/knowledge/wp-content/uplads/2014/07/pc.png) no-repeat center;
background-size: cover;
position: relative;
height:100%;
}
.back::before{
/* 透過した黒を上から重ねるイメージ */
background-color: rgba(0,0,0,0.4);
/* 自由に位置指定 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: ' ';
}
css
.title{
position: absolute;
width: 100%;
text-align: center;
}
이 경우 앞에 순서대로 올바르게 표시되지만 HTML은 다음과 같은 경우 배경 이미지로 둘러싸여 표시되지 않습니다.
html
<body>
<h1 class="title">パソコン教室</h1>
<div class="back">
<p>Learn together!</p>
</div>
</body>
z-idex로 겹치는 순서 지정하기
거기에 등장하는 것은 z-idex다.
참고로 포지션은 기본static에 적용되지 않습니다.
따라서 z-idex가 추가되면
css.title{
position: absolute;
width: 100%;
text-align: center;
/* 重なり順を指定*/
z-index: 1;
}
잘 나왔어!!!
사이트 축소판 그림
.title{
position: absolute;
width: 100%;
text-align: center;
/* 重なり順を指定*/
z-index: 1;
}
https://saruwakakun.com/html-css/basic/z-index
Reference
이 문제에 관하여(HTML & CSS 중첩 순서 지정하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/szaizen/items/16a01ccfa05280cf8853텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
