상단 설정이 작동하지 않습니다.

Question

화면 너비가 다른 경우 위치를 설정하기 위해 다음 코드를 % 방식으로 구현하려고합니다.

.text { 
 
    padding:10%; 
 
} 
 

 
.title { 
 
\t font-family: 'Great Vibes',cursive; 
 
\t font-size:150%; 
 
\t position:relative; 
 
\t border-bottom: 11px solid rgba(248,221,225,0.7); 
 
\t top:-10px; 
 
\t left:0; 
 
    width:70% 
 
} 
 

 
.title p { 
 
\t position:relative; 
 
\t top:40px; 
 
\t left:-20px; 
 
}

<div class="text"> 
 
<div class="title"> 
 
\t <p> title title title title title </p> 
 
</div> 
 
</div>

그래서, 나는 상단의 설정을 변경하고 왼쪽 : 아무리 내가 .title 페이지의에서 변경 얼마나

.text { 
 
    padding:10%; 
 
} 
 

 
.title { 
 
\t font-family: 'Great Vibes',cursive; 
 
\t font-size:150%; 
 
\t position:relative; 
 
\t border-bottom: 11px solid rgba(248,221,225,0.7); 
 
\t top:-8%; 
 
\t left:0; 
 
} 
 

 
.title p { 
 
\t position:relative; 
 
\t top:50%; 
 
\t left:-8%; 
 
}

<div class="text"> 
 
\t \t \t <div class="title"> 
 
\t \t \t \t <p> title title title title title </p> 
 
\t \t \t </div> 
 
</div>

하지만, top, 그것의 위치는 바뀌지 않는다.

누구나 아는 이유는 무엇입니까? 그리고 그것을 바꾸는 방법?

미리 감사드립니다.

Answer 1

당신은 부모 요소를 제공하기 위해 가지고 height

.text { 
 
    padding:10%; 
 
} 
 

 
.title { 
 
\t font-family: 'Great Vibes',cursive; 
 
\t font-size:150%; 
 
\t position:relative; 
 
\t border-bottom: 11px solid rgba(248,221,225,0.7); 
 
\t top:-8%; 
 
    height:50px; 
 
\t left:0; 
 
} 
 

 
.title p { 
 
\t position:relative; 
 
\t top:50%; 
 
\t left:-4%; 
 
}

<div class="text"> 
 
\t \t \t <div class="title"> 
 
\t \t \t \t <p> title title title title title </p> 
 
\t \t \t </div> 
 
</div>

난 그냥 맨 앞에 "여유"를 추가

Answer 2

하고 일하고있어.

.title p { 
position:relative; 
margin-top:50%; 
left:-8%; 
}