position : relative; 관련하여 질문드립니다.
293
작성한 질문수 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.container{
width: 400px;
height: 400px;
background-color: skyblue;
position: relative;
top: 10px;
left: 10px;
}
.one{
width: 100px;
height: 100px;
background-color: red;
position: absolute; /*absoule의 기준점 선정은 부모에 relative 설정*/
top: 50%;
left: 50%;
}
.two{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<div class="container"> <!-- container 클래스를 기준점으로 잡음-->
<div class="one"></div>
<div class="two"></div>
</div>
<div class="container"> <!-- top: 10px; 적용 안됨..?-->
<div class="one"></div>
<div class="two"></div>
</div>
</body>
</html>안녕하세요 :)
<div class="container">를 2번 출력하면
아래의 container 클래스는 top: 10px; 이 적용되지 않는 이유에 대해서 질문드립니다.
저는 아래 container 클래스가 출력될 때 top:10px; 이 적용되어서
중간에 여백이 생길 줄 알았는데, 붙어서 출력되더라구요.
답변 부탁드립니다.
감사합니다.
답변 1
0
이미 해결하셨겠지만..
두 container 태그에 모두 top 값이 적용되어서 그런 것 같습니다만
두 번째 container에 top값을 더 주거나 하시면 될 것 같습니다.
css에 container:nth-child(2){ top:20px } 를 하셔도 되고,, 방법은 많습니다!
프롬프트의 영문 버전을 만들 때, 출력 규칙에 포함된 한글 부분은 영어로 번역하지 않고 그대로 유지하면서, 영문 편과 한글 편을 한 번에 함께 출력하려면 어떤 워크플로우로 구성하면 좋을까요?
0
6
0
프로그램은 뭘 사용하시는 건가요??
1
9
2
수업자료와 노션 공유 문제
0
16
3
python run.py 실행시 에러 문제
1
24
2
조건 반복문 질문: for 문 ?
0
21
0
54강 4분 41초에서 질문 있어요.
0
18
1
안녕하세요 한번 더 문의드립니다.
0
20
1
codesandbox 처음부터 안되네요
0
639
2
codesandbox 문서 버튼이 안보여요
0
347
1
html의 input
0
353
0
HTML - input
0
248
0
현재 기준으로 쥬피터 노트북 메뉴가 안보이네요
0
321
0
20 분쯤에서 코드대로 했는데 왜 안되는걸까요ㅜ_ㅜ
0
239
0
atom 단축키 문의
0
384
1
이거 크롬 웹브라우저에 안나타나요...
0
235
1
재미있었어요.
0
237
1
facebook 컬러를 어떻게 가져오나요?
1
275
1
오류 질문드려요
1
259
1
쥬피터??가 뭔가요...
0
347
1
부트스트랩 다운 과정
2
275
1
open in browser 문의
1
316
2
{% static %} 을 해도 바뀌지 않음.
0
239
1
getElementByClass는 없나요?
2
360
1
탭을 누르는게 뭔가요?
2
416
2