如何在高度過渡期間保持文本的位置？

我希望保持文本的位置，但是，DIV徘徊時，文下降如何在高度過渡期間保持文本的位置？

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link href="site.css" rel="stylesheet" type="text/css" media="screen"/> 
</head> 
<body> 
<div></div> 
<p>hover over the div element above, and the text goes down</p> 
</body> 
</html>

CSS

div { 
width: 100px; 
height: 100px; 
background: red; 
-webkit-transition: height 1s; 
} 

div:hover { 
height: 300px; 
}

來源

2014-09-01 Akshay

'位置：absolute'？ – qtgye 2014-09-01 09:31:13

@jacelysh我試過了，但沒有奏效 – Akshay 2014-09-01 09:32:10

即使絕對定位，文本仍然會移動？奇怪的。 – qtgye 2014-09-01 09:33:16

添加以下到你的CSS：

p { 
    position:absolute; 
    top:100px; 
}

See DEMO here。

來源

2014-09-01 09:31:58 Hiral

謝謝我從來沒有這樣想過 – Akshay 2014-09-01 09:34:30

@Akshay歡迎:) – Hiral 2014-09-01 09:40:19

添加這個..

p 
{ 
    position: fixed; 
    top: 125px; 
}

DEMO

來源

2014-09-01 09:35:41 next2u

如何在高度過渡期間保持文本的位置？

回答

相關問題