z-index, 메뉴 바 가운데 정렬 법, order

z-index

z-index는 div가 있는 위치가 맨 앞에서부터 몇 번째인지 나타 낸다. 즉, layer의 순서가 몇 번째인지를 나타낸다. display 작업을 하거나 postition이 고정되어 있으면 layer를 갖는다. z-index의 기본값은 0이며 더 큰 숫자를 가진 부분이 위에 겹쳐서 보이게 된다.

#chat-screen .status-bar {
  z-index: 2;
}

#chat-screen .alt-header {
  top: 10px;
  z-index: 1;
}

이러면 status-bar가  더 위에 있다.

그리고 고정된 상단바에서 사용할 때는 상단바에 배경색을 따로 또 줘야했다. 그래야 지나간 요소들이 덮어져서 확실히 안보인다.

 

=> z-index는 absolute postion이나 fixed position에 대해 설정할 수 있다. 그리고 상단바가 겹쳐지는 현상을 z-indxe로 해결 가능하다.

---

가운데로 정렬하는 법

.alt-header__column {
  width: 33%;
}

/* 제목 가운데로 정렬하는 법 */
.alt-header__column:first-child {
  margin-right: auto;
}

.alt-header__column:nth-child(2) {
  text-align: center;
}

.alt-header__column:last-child {
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
}

1. 먼저 왼쪽, 가운데, 오른쪽이 각각 같은 너비를 갖도록 해준다.

2. 왼쪽 오른쪽 요소를 maring-(left/right): auto로 정렬한다.

3. 가운데 요소를 중앙으로 정렬한다.

4. 오른쪽 요소를 flex 박스로 만들고 flex-end를 한다.

---

order

.message-row--own .message__bubble {
  order: 1;
}
.message-row--own .message__time {
  order: 0;
}

왼쪽 채팅 속성을 오른쪽 채팅처럼 시간, 내용 순으로 표현하고 싶으면 order을 사용하면 된다.

order 속성은 오직 flex children에게만 적용된다.

 

-더 쉬운 방법

.message-row--own .message__info {
  flex-direction: row-reverse;
}

row-reserve를 사용하면 된다. 이미 전에 공부한 내용인데 미리 생각하지 못해서 아쉽다.