글락기
40
2021-09-22 21:38:10
2
104

css 가상요소와 쌓임순서 도움이 필요합니다 (간단한 예제)




[목표] 

2개의 박스가 겹쳐져있는데 마우스를 올리면 분리되는 효과를 주려합니다

회색을 앞에 두고 검은색(가상요소)을 뒤에 두려고 합니다

지금 상태에서 검은색이 뒤로가기만 하면 됩니다


[문제]

무슨짓을 해도 검은색이 앞에 있습니다

z-index, relative, absolute 이3가지를 여기줘보고 저기줘보고 넣었다 뺐다 섞었다 

수 시간에 걸쳐 가능한 모든 방법을 시도해보았지만

레이아웃이 깨질지언정 쌓임 순서에는 아무 변화가 없습니다 


그래서 모든 position과 z-index를 뺀 코드를 첨부하겠습니다

첨부한 코드를 실행하면 위에 움짤처럼 작동합니다

이 상태에서 어떻게 해야 모든걸 그대로 유지하고 검은색만 쏙 뒤로갈까요?  


<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./experiment.css">
</head>

<body>
  <section>
    <div class="item"></div>
    <div class="item"></div>    
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>

</html>


section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-around;
  background-color: cornflowerblue;
  width: 700px;
  height: 400px;
}

.item, .item::before {
  width: 200px;
  height: 150px;
  transition: .3s;
}

.item {
  background-color: lightgray;
}

.item::before {
  content: "";
  display: block;
  background-color: #1b1b1b;
}

.item:hover{
  transform: translate(5px, -5px);
  /* 오른쪽위로 */
}

.item:hover::before{
  transform: translate(-10px, 10px);
  /* 왼쪽아래로 */
}


0
  • 답변 2

  • doru
    350
    2021-09-23 10:01:12 작성 2021-09-23 10:04:12 수정됨

    구조상 안됩니다.. 보통 css로 오브젝트를 Z축으로 뒤로 보내는건 z-index를 쓰는데 이것도 조건이 있어서말이지요..저런경우에는 div안에 차라리 div를 두개 넣어서 하나는 검은색, 하나는 회색으로 넣어서 쓰셔야할겁니다.. item은 그냥 자리만 잡아주고 내부의 div 두개를 css로 제어하는거외엔..

    아니면 그냥 색깔을 바꾸셔야하는데 못바꾸는 이유가 있으니 질문을 하셨을테지요

  • 글락기
    40
    2021-09-23 16:51:11

    아하! 원래 안되는거였군요 

    사실 이번 예제를 div 2개 겹치는 식으로 전에 했었습니다

    박스 겹치는거는 아무 의미없이 온전히 디자인이라 하나의 div에 css로 구현하고 싶었습니다

    단순히 디자인적 요소를 html로 처리하니까 야매같아서 찜찜했습니다

    내가 잘못알고있나? 모르는게있나? 하면서 많은 고민을 했는데 후련하네요

    색깔 바꿔도 되긴하는데 좀더 정확히 말해서 div요소를 앞에, 그것의 가상요소를 뒤에 두고싶었습니다

    저 예제를 바탕으로 해서 개인 프로젝트에 적용할 예정이었거든요

    아무쪼록 크게 도움되었습니다 감사합니다

  • 로그인을 하시면 답변을 등록할 수 있습니다.