html&php

우측 상단에 박스 고정하기

Zyss 2023. 3. 21. 15:45
반응형

.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를  추가하면 된다.

 

 

반응형