다른 요소 위에 요소를 배치하는 방법

Question

두 번째 요소의 위치를 ​​수정하지 않고 다른 요소 위에 요소를 배치하고 싶습니다. 내 말은 :

.container { 
 
\t display: flex; 
 
\t align-content: baseline; 
 
\t padding: 50px; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t background-color: blue; 
 
} 
 

 
.base { 
 
    color: black; 
 
} 
 

 
.top { 
 
    color: red; 
 
}

<div class="container"> 
 
    <div class="base"> 
 
    base 
 
    <div class="top"> 
 
     should be on top 
 
    </div> 
 
    </div> 
 
</div>

내가 should be on top 사업부가 base 사업부 위에 배치 할 수 및 base 사업부는 여전히 수행 방식을 정렬하고 싶습니다. 상대 위치 지정을 사용하고 음수의 바닥 값을 지정하려고 시도했지만 응답이 없습니다.

.container { 
 
    \t display: flex; 
 
    \t align-content: baseline; 
 
    \t padding: 50px; 
 
    \t width: 50px; 
 
    \t height: 50px; 
 
    \t background-color: blue; 
 
    } 
 

 
    .base { 
 
     color: black; 
 
    } 
 

 
    .top { 
 
     color: red; 
 
    }

<div class="container"> 
 
    <div class="top"> 
 
    should be on top 
 
    <div class="base"> 
 
     base 
 
    </div> 
 
    </div> 
 
</div>

should be ontop 사업부는 base의 상단에 있어야하고, 예전 base이 내가 그들이 원하는 방법을 이전 위치를 유지해야 base을 제외하고있다. 어떻게해야합니까?
이것은 내가하려고했던 것입니다 :

.container { 
 
    \t display: flex; 
 
    \t align-content: baseline; 
 
    \t padding: 50px; 
 
    \t width: 50px; 
 
    \t height: 50px; 
 
    \t background-color: blue; 
 
    } 
 

 
    .base { 
 
     color: black; 
 
    } 
 

 
    .top { 
 
     position: relative; 
 
     color: red; 
 
     bottom: 4.8em; 
 
    }

<div class="container"> 
 
     <div class="base"> 
 
     base 
 
     <div class="top"> 
 
      should be on top 
 
     </div> 
 
     </div> 
 
    </div>

그건 내가 그들을 배치 할 방법입니다. 그러나 라인 수를 should be ontop div로 변경하면 base div 위에 오버플로됩니다. 나는 그것이 js를 사용하여 끝날 수 있다고 생각하지만, 나는 단지 CSS와 함께하는 것이 더 좋다. 이것을 할 수있는 방법이 있습니까?

Answer 1

마지막으로 이것을 수행 할 방법을 알아 냈습니다. 자사의 최고의 CSS 코드가 아니지만 적어도 트릭 않았다.

.container { 
 
    display: flex; 
 
    align-content: baseline; 
 
    padding: 50px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 
.base { 
 
    position: relative; 
 
    color: black; 
 
} 
 

 
.top-container { 
 
    height: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
} 
 

 
.top { 
 
    position: absolute; 
 
    color: red; 
 
    bottom: 0; 
 
}

<div class="container"> 
 
     <div class="base"> 
 
     base 
 
     <div class="top-container"> 
 
      <div class="top"> 
 
      should be on top 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div>

나는 내 top 사업부에서 bottom: 0을했을 때 그래서, 아무리 큰 base의 상단에 배치하지 height & & top = 0과 함께 base DIV 내부 top-container을 생성 그들 중 누구라도있었습니다. 그것이 다른 사람들을 위해 일하기를 희망하십시오. 모든 개선은 감사하겠습니다 :)

Answer 2

내가 오해 한 것 같습니다. 변경 사항을 반영하기 위해 답변을 업데이트했습니다.

부모 div의 위치는 relative이고 내부 div 위치는 absolute이어야합니다. 따라서 above div는 base div와 관련하여 '절대'가됩니다.

이제 흐름에서 요소를 제거하고 다른 위치에 배치 할 수있는 다른 방법이 없기 때문에 div가 필요한 "위"의 양을 지정해야합니다. (당신이 사용하지 않는 자바 스크립트)

가 여기에 귀하의 코드처럼 보일 수 있습니다 방법은 다음과 같습니다

.container { 
 
\t display: flex; 
 
\t align-content: baseline; 
 
\t padding: 50px; 
 
\t width: 50px; 
 
\t height: 50px; 
 
\t background-color: blue; 
 
} 
 

 
.base { 
 
    position: relative; 
 
    color: black; 
 
} 
 

 
.above { 
 
    position: absolute; 
 
    top: -60px; 
 
    color: red; 
 
}

<div class="container"> 
 
    <div class="base"> 
 
    base 
 
    <div class="above"> 
 
     should be above 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

난 그냥이, ​​그냥 메인 하나에 두 개의 div가를 만들 필요가 없습니다 생각하고 원하는 곳에 텍스트 배치

그렇지 않으면 내가 어떻게 당신을 제안한다 : 다양한 방법으로

.container { 
 
    \t display: flex; 
 
    \t width: 150px; 
 
    \t height: 150px; 
 
    \t background-color: blue; 
 
     position:relative; 
 
    } 
 

 
    .base { 
 
     position: absolute; 
 
     top:70%; 
 
     left:50%; 
 
     transform:translate(-50%,-70%); 
 
     color: black; 
 
    } 
 

 
    .above { 
 
     position: absolute; 
 
     top: -80%; 
 
     left:50%; 
 
     transform:translate(-50%,-80%); 
 
     color: red; 
 
    }

<div class="container"> 
 
    <div class="base"> 
 
    base 
 
    <div class="above"> 
 
     should be above 
 
    </div> 
 
    </div> 
 
</div>

당신이 모든 것을 할 수 있지만 HTML을 편집하여 더 쉽게)

Answer 4

내가 당신을 이해하는 경우 정확하게 이것은 원하는 것입니다.

.container { 
 
    \t display: flex; 
 
    \t align-content: baseline; 
 
    \t padding: 50px; 
 
    \t width: 50px; 
 
    \t height: 50px; 
 
    \t background-color: blue; 
 
     position: relative; 
 
     justify-content: center; 
 
     position: rela 
 
    } 
 

 
    .base { 
 
     color: black; 
 
    } 
 

 
    .top { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     right: 0; 
 
     margin: auto; 
 
     color: red; 
 
     bottom: 4.8em; 
 
     text-align: center; 
 
    }

<div class="container"> 
 
     <div class="base"> 
 
     base 
 
     <div class="top"> 
 
      should be on top 
 
     </div> 
 
     </div> 
 
    </div>

요소가 항상 중심에 있도록

1. 나는 .container 요소에 justify-content: center 및 align-items: center 속성을 추가했다.
2. 을 .top 요소에 위치 시키므로 항상 맨 위에 위치합니다. 나는 또한 .container에 위치를 추가 했으므로, 절대 위치 og .top 요소는 .container의 위치를 ​​기반으로합니다. 이것이 절대 위치 지정이 작동하는 방법입니다 (위치 지정이 첫 번째 요소 인 경우 static과 다른 경우).
3. text-align: center에서 .top까지를 추가하여 텍스트가 가운데에 맞춰졌습니다.

.top 요소에 줄을 추가하여 예상되는 동작인지 확인할 수 있습니다.