그림과 글자 겹치게 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 : 숫자; 숫자가 클수록 위로 표시