반응형
.pro_text{
float:left;
margin-left:30px;
text-align:left;
border:0px solid RED;
width:600px;
font-size:14px;
line-height:30px;
position: relative; /* 부모 */
}
.mark{
background-color: #eee;
width:80px;
height:80px;
top: 20px;
right: 10px;
position: absolute; /* 자식 */
}
<div class=pro_text>
<div class=mark></div>
</div>
작은 박스를 원하는 위치에 배치하는 방법이다.
position을 원하는 부모 박스와 자식 박스에 지정해 놓고
top 과 rigjht 수치를 수정하여 원하는 위치를 조정한다.
왼쪽에 배열하고 싶다면 right는 삭제하고 left를 추가하면 된다.
반응형
'html&php' 카테고리의 다른 글
하이퍼링크 샵(#) 클릭 시 상단으로 이동하는 이벤트 무시하기 (0) | 2023.03.22 |
---|---|
클릭 시 상단으로 자동 스크롤 (0) | 2023.03.21 |
li를 이용한 가로 메뉴 (0) | 2023.03.21 |
이미지 또는 텍스트를 정중앙으로 정렬하기 (0) | 2023.03.21 |
워드프레스 데이터베이스 연결중 에러 (0) | 2018.03.07 |