定位绝对定位的旋转文本

Question

我很难定位转换过的旋转文本。无论是纵向还是横向，我都无法弄清楚如何定位旋转的文本rotateText，以便它在相对容器bottom: 60px中为left: 10%和#tslotBlock1inner。

然后，如果您单击下面的jsfiddle链接并将视口更改为640px或更低，您将看到旋转的文本完全消失，即使使用left:30%。

我在下面列出了我希望如何定位的图片。谁能帮助解释我做错了什么？

Jsfiddle link to see mobile version

＆＃13;

＆＃13;

.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;
}

}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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）

Answer 2

我通过更新你的变换并删除定位来获得它

.rotateText {
position: absolute;
-webkit-transform: rotate(-90deg) translate(-100px, -100px);
transform: rotate(-90deg) translate(-100px, -100px);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}

Answer 3

我同意DavidW。 我添加了一些定位和一个底部属性，以便将文字保留在图像旁边。

.rotateText {
    float: left;
    position: relative;
    bottom: 0px;
    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;
}

Answer 4

这是一种不同的方法，但不依赖于幻数/大小，使用css writing-mode：

＆＃13;

＆＃13;

.rotated-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 60px;
  text-transform: uppercase;
  display: inline-block;
  background: cyan;
}

.flex {
  display: flex;
}

.image {
  flex-grow: 1;
  background: url(https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

＆＃13;

<p> LAKJSDLKJASLDJKALSDJLASKDLAKSJDLKJASLDKASLDJLASKDJLASKJDLASDJ </p>
<div class="flex">
  <div class="rotated-text">Advantages</div>
  <div class="image" />
</div>

＆＃13;

＆＃13;

＆＃13;