如何解决文本的粘性位置和宽度
嗨,我应该制作一种带有位置:粘性,显示:弹性的滑块,通过水平滚动,一个图像和一个具有相同宽度的文本将滚动粘性,并且每个文本必须位于每个图像的左侧 像这样:demo
但是如果我更改文本的“宽度”,则粘性不起作用。(片段上的宽度:5%) 只要我应该给这个文本一个背景颜色,我就应该做某事。 我知道它一定与内联或块级元素有关,我更改了代码,但它仍然无法正常工作。 有人可以帮忙吗?
* {
box-sizing: border-box;
background-color: black;
}
.slider {
display: flex;
flex-direction: row;
}
.slider img {
height: 200px;
}
.txt {
display: inline-block;
position: sticky;
left: 0;
background-color: rgba(0,0.5);
color: white;
font-size: 20px;
transform: rotate(90deg) translateX(100px);
width: 5%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="slider">
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
<div class="slider-box">
<div class="txt">Anime</div>
<img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png">
</div>
</div>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。