position: absolute; --> 기준: 부모
position: fixed; ------->기준: 브라우저
position: relative;--------> 원래 내 위치
position: static; -------->기준이 x 좌표 적용 x
top, bottom 거리 설정을 할때
position: static이 원래 적용되어있음 하지만 기준이 없기 때문에 사용할 순 없음. --> relative를 이용해서 설정 해주면 됨.
<style>
div {
width: 100%;
min-height: 100px;
height: auto;
border: 1px solid red;
}
.parent{
position: relative;
}
.target {
position: absolute;
top: 100px;
border: 3px solid blue;
}
</style>
</head>
<body>
<div class="other">
other
</div>
<div class="parent">
parent
<div class="target">
target
</div>
</div>
<div class="other">
other
</div>
</body>
target은 absolute, 부모 태그를 따라가게 되는데 부모태그인 parent에 relative (기본값)이 설정하게 되면 기준이 없기 때문에 제대로 설정이 되지 않음. --> 그렇기 때문에 부모 태그인 parent 에도 relative 설정을 해줘야 함. 그럼 부모태그로부터 100px 딱 떨어진 곳에 target이 올수 있음.
<style>
div {
width: 100%;
min-height: 100px;
height: auto;
border: 1px solid red;
}
.parent{
position: relative;
}
.target {
position: fixed;
top: 50px;
border: 3px solid blue;
}
</style>
</head>
<body>
<div class="other">
other
</div>
<div class="parent">
parent
<div class="target">
target
</div>
</div>
<div class="other">
other
</div>
</body>
<style>
body {
margin: 0px;
}
.bg {
width: 100vw;
height: 100vh;
background-color:black;
position: fixed;
top: 0;
left: 0;
opacity: 0.5;
}
.modal {
width: 200px;
height: 100px;
background-color: white;
border: 1px solid lightblue;
border-radius: 14px;
position: fixed;
z-index: 1;
padding: 20px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<div class="bg"></div>
<div class="modal">
정말 삭제하시겠습니까?
<button>취소</button>
<button>삭제</button>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis illum consequatur voluptas harum ut eos, libero veritatis omnis a quos nulla qui cum, deserunt suscipit expedita itaque nam consequuntur! Itaque?</p>
</body>
z-index를 통해서 modal 을 앞으로 튀어나올 수 있게 값을 올려주고
정중앙에 오게 하기 위해
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
사용, 스크롤을 내려도 정중앙에 오게 하기 위해서 position: fixed 사용
Media qurey 브레이크포인트
<body>
<div class="box"></div>
</body>
.box{
width: 100px;
height: 100px;
border: 4px solid red;
}
@media screen and (max-width: 1260px) {
.box {
background-color: red;
}
}
@media screen and (max-width: 768px) {
.box {
background-color: blue;
}
}
@media screen and (max-width: 576px) {
.box {
background-color: green;
}
}
