html - 定位绝对定位的旋转文本

Question

我很难定位转换后的旋转文本。无论是垂直还是水平，我都不知道如何定位旋转的文本 rotateText，所以它是 bottom: 60px 和 left: 10%在相关容器 #tslotBlock1inner 中。

然后，如果您单击下面的 jsfiddle 链接并将视口(viewport)更改为 640 像素或更小，您将看到旋转的文本完全消失，即使 left:30% 也是如此。

我在下面附上了一张图片，说明我希望它如何定位。谁能帮忙解释一下我做错了什么？

Jsfiddle link to see mobile version

.sec90 {
	width: 90%;
	margin: 20px auto 60px auto;
}
.rotateText {
	position: absolute;
	top: 50%;
	bottom: 60px;
	left: 2%;
	-webkit-transform: rotate(-90deg) translateX(-50%);transform: rotate(-90deg) translateX(-50%);
	font-family: 'Nunito', sans-serif;
	letter-spacing: .2rem;
	font-size: 2rem;
	color: #b82222;
	text-transform: uppercase;
}
#tslotSec {
	margin: 60px auto;
}
#tslotBlock1 {
	display: inline-block;
	vertical-align: top;
}
#tslotBlock1 {
	width: 70%;
}
#tslotBlock1:after {
	content: '';
	display: inline-block;
	background: #b82222;
	width: 8px;
	height: 70%;
	vertical-align: middle;
}
#tslotBlock1inner {
	padding-right: 10%;
	position: relative;
}
#tslotBlock1inner img {
	width: 35%;
	height: auto;
	margin-left: 30%;
}
.dG {
	font-size: 1.1rem;
	line-height: 1.5em;
	font-family: 'Nunito', sans-serif;
}

/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {
.rotateText {
	bottom: 0px;
	left: 30%;
	-webkit-transform: rotate(-90deg) translateX(0%);transform: rotate(-90deg) translateX(0%);
	font-size: 1.5rem;
}

}

<section class="sec90" id="tslotSec">
			<div id="tslotBlock1">
				<div id="tslotBlock1inner">
					<h2 class="blockTG">Advantages</h2>
					<p class="dG">
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
					<p class="dG">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
					<div class="rotateText">Advantages</div>
					<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782">
				</div>
			</div>
		</section>

Answer 1

我更愿意避免 position: absolute; 用于作为页面内容一部分的元素，因此我使用 float 代替。我还设置了 transform-origin，因为通常更容易确定相对于固定点的定位，而不是对象边界框的中间:

.rotateText {
    float: left;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 2rem;
    color: #b82222;
    text-transform: uppercase;
}

( Modified fiddle )