css 위치 속성에 관한 간단한 질문
본문
hover 선택자를 이용해서 마우스 올리면 저런식으로 바뀌게 하고 싶어서
#two:hover {
position: absolute;
top: 20px;
left: 20px;
background-color:green;
color: white;
text-align: center;
}
#five:hover {
position: absolute;
bottom: 20px;
right: 20px;
background-color:green;
color: white;
text-align: center;
}
이렇게 소스코드를 작성했습니다. 제가 알고 있기로는 top: 양수px - 상단기준. 아래로 이동
bottom: 양수px - 하단기준. 위로 이동 , left: 양수px - 좌측기준. 오른쪽으로 이동 이여서
저렇게 작성했는데 의도한 것과는 다른 방향으로 움직이네요 ㅜㅜ 심지어 두번째거는 엄청 아래로 많이
내려가고요... 뭐가 문제인걸까요???
답변 3
그냥 bottom 을 하면 사이트하단을 기준으로 위로 20이 됩니다..
원하시는 곳에 전체를 박스를 한번 쒸우시고 그 안에서만 움직이게 하는것이 좋겠습니다..
저 빨간것들을 감싸고 있는 부모요소에 relative가 들어가야합니다
빨간것들을 감싸고 있는 부모요소가 없으면 만들어줘야 하는건가요? 애초에 저 빨간 사각형을 <div>로 만들었거든요..
