top中的％设置不起作用

Question

我试图以％方式实现以下代码来设置位置，以防屏幕宽度不同。

＆＃13;

＆＃13;

.text {
  padding:10%;
 }

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

所以，我在顶部更改设置，然后离开：

＆＃13;

＆＃13;

.text {
  padding:10%;
 }

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但是，无论我改变了多少。标题顶部，它的位置都没有变化。

任何人都知道为什么？以及如何改变它？

提前致谢!!

Answer 1

您必须为父元素height

.text {
  padding:10%;
 }

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

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

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

Answer 2

我刚刚添加了＆＃34; margin＆＃34;在top之前，它正在工作。

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