css 부모 요소 우측 상단에 위치 고정하기
2022. 3. 24. 09:06
보통 목록 리스트나 card형태의 요소들은 삭제 버튼이나 설정 버튼같은 것들은 부모요소를 따라가게 놔두는데 이럴 때에 position absoluete를 사용해야 한다.
# 주의할점
1. 부모 요소는 position:relative 속성을 가져야 한다.
2. 자식 요소는 position:absolute 속성을 가져야한다.
3. 자식 요소의 위치는 top,right,bottom,left 속성 지정으로 설정한다.
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
position: relative;
width:500px;
height:500px;
background-color: #0dcaf0;
}
.block{
position: absolute;
top: 8px;
right: 8px;
width:30px;
height:30px;
background-color: #0f5132;
}
</style>
</head>
<body>
<div class="container">
<div class="block">안녕</div>
<div>안녕하세요</div>
</div>
</body>
</html>
<결과>
'IT 족집게 > 개발' 카테고리의 다른 글
| Javascript insertBefore로 요소 전으로 순서 바꾸기 (0) | 2022.03.24 |
|---|---|
| css 글자 크기 부모 요소에 따라가게 설정 (0) | 2022.03.24 |
| Referential integrity constraint violation 스프링 오류 해결법 (0) | 2022.03.15 |
| jquery 화살표 함수 this 오류 (0) | 2022.03.13 |
| detached entity passed to persist JPA 다대일 오류 (0) | 2022.03.12 |