본문 바로가기
디자인/HTML, CSS, JS

CSS[12] 눈금으로 절대 위치 지정

by 코코리★ 2018. 12. 22.
728x90

절대 위치 지정이 그리드 내의 정상적인 흐름에 미치는 영향의 예.

일반 블록 내에서와 마찬가지로 그리드 내에서 절대 위치 지정을 사용할 수 있습니다. position: relative그리드 항목에 설정 한 다음 position: absolute하위 항목 중 하나 를 사용 하면 지정한 모든 위치가 해당 그리드 항목에 적용됩니다.

다음은 절대 위치 지정을 사용하여 그리드 항목의 오른쪽 하단 모서리에 아이콘을 배치하는 예제입니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "nav footer footer";
  grid-template-rows: 50px 1fr 50px;  
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;
  height: 100vh;
  margin: 0;
  }  
#pageHeader, #pageFooter, #mainArticle, #mainNav, #siteAds {
  padding: 1em;
  background: gold;
  }
#pageHeader {
  grid-area: header;
  }
#pageFooter {
  grid-area: footer;
  }
#mainArticle { 
  grid-area: article;    

그러나 그리드 내에 항목을 배치 할 때 유의해야 할 몇 가지 사항이 있습니다.

위치 지정된 항목이 눈금 레이아웃에 참여하지 않습니다.

절대 배치 된 항목은 격자 레이아웃에 참여하지 않으며 공간을 차지하지 않습니다. 따라서 다른 그리드 항목의 배치에는 영향을주지 않습니다.

여기에 설명 할 두 가지 예가 있습니다.

절대 위치 지정이없는 경우

이 예제에서는 상자 4를 명시 적으로 설정하여 첫 번째 행의 두 번째 열로 이동하고 다른 모든 상자는로 설정했습니다 auto. 상자 4는 효과적으로 상자 2를 해당 슬롯 밖으로 밀어냅니다. 상자 2와 3은 사용 가능한 다음 그리드 영역으로 자동 배치됩니다. 따라서 상자 4가 모눈 항목의 배치에 영향을 미쳤습니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  text-align: center;
}
.red {
  background: orangered;
  grid-column: auto; 
  grid-row: auto;
}
.green {
  background: yellowgreen;
  grid-column: auto; 
  grid-row: auto;
}

절대 위치 지정 사용

상자 4를로 설정 position: absolute하면 상자 2의 위치에 있지만 상자 2는 영향을받지 않습니다. 상자 3은 영향을받지 않습니다.

 
 Editor Preview
<!doctype html>
<title>Example</title>
<style>
#grid {
  display: grid;
  position: relative;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
  height: 90vh;
  background-color: beige;
}
#grid > div {
  padding: 20px;
  font-size: 4vw;
  color: white;
  text-align: center;
}
.red {
  background: orangered;
  grid-column: auto; 
  grid-row: auto;
}
.green {
  background: yellowgreen;
  grid-column: auto; 
  grid-row: auto;
}

위치가 지정된 항목 내용에 맞게 축소

기억해야 할 또 다른 사실은 위치가 지정된 항목이 내용에 맞게 축소된다는 것입니다 (이전 예에서이 효과를 볼 수 있음).

이것은 일반적인 그리드 항목이하는 것과 다릅니다. 일반 그리드 항목은 그리드 영역에 맞게 늘어납니다. 따라서 그리드 항목이 두 개의 열과 두 개의 행으로 확장되도록 지정하면 그렇게됩니다.

auto위치 항목 의 값

일반 격자 항목에서 auto격자 배치 속성 의 값은로 변환 span 1되지만 절대 배치 된 항목에서는 격자 컨테이너의 패딩 가장자리로 해석됩니다. 이것은 어떻게 작동하는지 알지 못한다면 어떤 이상한 일이 일어날 수 있습니다.

auto값은 그리드 게재 위치 속성의 초기 값입니다, 그래서 당신은 다른 값을 지정하지 않으면이 기본적으로 발생합니다.



728x90
저작자표시 동일조건

'디자인 > HTML, CSS, JS' 카테고리의 다른 글

CSS 그리드로 어떻게 디자인하나요?  (0) 2019.01.01
CSS Grid Examples  (1) 2018.12.24
CSS[14] 그리드 레이아웃을위한 브라우저 지원  (0) 2018.12.23
CSS[13] 그리드 인스펙터 사용하기  (0) 2018.12.22
CSS[11] 그리드 항목 계층화  (0) 2018.12.22
CSS[10] 그리드 정렬 (9가지)  (0) 2018.12.21
CSS[9] 자동 배치가있는 양식 레이아웃  (0) 2018.12.21
CSS[8] 그리드 항목 배치  (0) 2018.12.21

관련글

댓글

티스토리툴바