幻灯片标题旋转并右对齐布局问题求助

问题核心 #

你当前的定位混乱源于元素旋转后的基准偏移：默认transform: rotate()以元素中心为原点旋转，旋转后元素的宽高计算、定位基准都会错位，导致用right/top调整时完全不符合预期。

方案一：修复旋转定位（适配现有代码） #

通过调整旋转原点和位移，精准控制标题位置：

.slide-text {
    position: absolute;
    /* 先定位到幻灯片父容器的右上角 */
    right: 0;
    top: 0;
    background-color: #ff0000;
    color: white;
    width: auto; /* 取消固定宽度，让文本自适应 */
    padding: 10px;
    text-align: center;
    font-size: 1.5rem;
    /* 把旋转原点设为元素的右上角 */
    transform-origin: top right;
    /* 旋转后向左位移自身高度，让标题贴紧图片右侧顶部 */
    transform: rotate(-90deg) translateX(-100%);
    
    -webkit-transform: rotate(-90deg) translateX(-100%);
    -moz-transform: rotate(-90deg) translateX(-100%);
    -ms-transform: rotate(-90deg) translateX(-100%);
    -o-transform: rotate(-90deg) translateX(-100%);
}

同时给每个幻灯片父容器添加相对定位（让绝对定位的标题有参考基准）：

#slide-first-element,
#slide-element-2,
#slide-element-3 {
    position: relative;
    /* 保留原有样式 */
    display: block;
    width: 100%;
    height: auto;
}

方案二：更简便的竖排实现（无需旋转） #

用CSS原生垂直排版属性，避免旋转带来的定位问题，代码更简洁：

.slide-text {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #ff0000;
    color: white;
    padding: 10px;
    font-size: 1.5rem;
    /* 设置垂直排版方向 */
    writing-mode: vertical-rl;
    /* 翻转文本，让文字正立显示 */
    transform: scale(-1);
}

同样需要给每个幻灯片父容器添加position: relative。

完整修改后的代码 #

CSS 部分 #

/* Slider */
/* Slideshow container */
#slide-container {
    position: relative;
    max-width: 800px; /* 响应式设置 */
}

/* 所有幻灯片元素统一设置相对定位 */
#slide-first-element,
#slide-element-2,
#slide-element-3 {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

/* 非首屏幻灯片的绝对定位 */
#slide-element-2,
#slide-element-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* 图片样式 */
.slide-image {
    width: 100%;
}

/* 竖排标题样式（方案二） */
.slide-text {
    position: absolute;
    right: 0;
    top: 0;
    background-color: #ff0000;
    color: white;
    padding: 10px;
    font-size: 1.5rem;
    writing-mode: vertical-rl;
    transform: scale(-1);
}

/* 轮播动画 */
#slide-first-element {
    animation: fade-1 10s infinite;
    -webkit-animation: fade-1 10s infinite;
}

#slide-element-2 {
    animation: fade-2 10s infinite;
    -webkit-animation: fade-2 10s infinite;
}

#slide-element-3 {
    animation: fade-3 10s infinite;
    -webkit-animation: fade-3 10s infinite;
}

@keyframes fade-1 {
    0% { opacity: 1; }
    33% { opacity: 0; }
    66% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-2 {
    0% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 0; }
    100% { opacity: 0; }
}

@keyframes fade-3 {
    0% { opacity: 0; }
    33% { opacity: 0; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

/* 第四张幻灯片动画示例 */
@keyframes fade-4 {
    0% { opacity: 0; }
    25% { opacity: 0; }
    50% { opacity: 0; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

HTML 部分（无需修改） #

<div id="slide-container">
    <div id="slide-first-element">
        <img class="slide-image" src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p class="slide-text">Beautiful</p>
    </div>
    <div id="slide-element-2">
        <img class="slide-image" src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p class="slide-text">Amazing</p>
    </div>
    <div id="slide-element-3">
        <img class="slide-image" src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p class="slide-text">Incredible</p>
    </div>
</div>

内容的提问来源于stack exchange，提问作者joshmrodg