그림과 글자 겹치게 Position
1. main 태그 아래에 문장 제목 넣기 h2
<div class="content-area group">
<main class="main-area">
<h2>Main Column Heading</h2>
2. img 태그 본문에서 첫번째 문장 뒤에 넣기
이미지는 원하는 것으로 넣어도 된다.
픽사베이
언스플래시
3. img 태그 CSS 위치는 body 아래에 넣기
img{
max-width: 100%;
height: auto;
}
4. div( img 태그 + div( 겹쳐질 문장 ) )
<div class="image-banner">
<img src="이미지 주소">
<div class="banner-description">
<p>This is a brief description of the image. This is a photograph of a squirel on the train tracks that was taken in Oregon. This squirrel was incredibly brave and enjoyed playing on the tracks.</p>
</div>
</div>
5. CSS 하기
CSS
img{
max-width: 100%;
height: auto;
}
/* 오버레이 */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #FFF;
background-color: rgba(0, 0, 0, .65);
padding: 15px 25px;
}
6. 이미지 배너와 사이드 바가 겹치게
/* 오버레이 */
.image-banner {
position: relative;
left: 100px;
}
7. 사이드 바도 postion: relative;
8. z-index로 아래쪽이 위쪽으로 올라오게 해보자
리뷰
- postion : absolute; 절대좌표
- postion : relative; 상대좌표
- z-index : 숫자; 숫자가 클수록 위로 표시
Author And Source
이 문제에 관하여(그림과 글자 겹치게 Position), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@drv98/그림과-글자-겹치게-오버레이저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)