테스트 사이트 - 개발 중인 베타 버전입니다

css 위치 속성에 관한 간단한 질문 채택완료

썸머워즈 5년 전 조회 2,377

 

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개

채택된 답변
+20 포인트

그냥 bottom 을 하면 사이트하단을 기준으로 위로 20이 됩니다..

 

원하시는 곳에 전체를 박스를 한번 쒸우시고 그 안에서만 움직이게 하는것이 좋겠습니다..

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

s
sinbi Expert
5년 전

해당 속성 매뉴얼을 다시 한번 참조해 보세요.

https://homzzang.com/b/css-108

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

저 빨간것들을 감싸고 있는 부모요소에 relative가 들어가야합니다

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

썸머워즈
5년 전
빨간것들을 감싸고 있는 부모요소가 없으면 만들어줘야 하는건가요? 애초에 저 빨간 사각형을 <div>로 만들었거든요..

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인