如何将文本稍微移到顶部？

【问题标题】：How to move the text to the top slightly?如何将文本稍微移到顶部？
【发布时间】：2020-12-09 16:55:51
【问题描述】：

我正在尝试设计一个滑块，要在下面显示标题和小细节，并带有指向标题细节的链接，我正在尝试使用 CSS 和 HTML 来完成这项任务。这是 HTML 文件：

@import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway");
body {
  width: 100%;
  margin: 0 auto;
  font-family: "Raleway", sans-serif;
  color: #fff;
  font-size: 1.75vw;
}

body * {
  width: 100%;
  position: relative;
  display: block;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  z-index: 100;
}

h1 {
  font-size: 6vw;
  text-transform: uppercase;
  font-weight: normal;
}

ul,
li {
  list-style: none;
}

label {
  cursor: pointer;
}

input {
  display: none;
}

.slider {
  height: 25vw;
  overflow: hidden;
}

.slider>ul {
  height: 100%;
  z-index: 100;
}

.slider>ul>li {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  z-index: 1;
  transition: all 2000ms ease;
}

.slider>#input-slide-0:checked~ul>li.slide-0,
.slider>#input-slide-1:checked~ul>li.slide-1,
.slider>#input-slide-2:checked~ul>li.slide-2,
.slider>#input-slide-3:checked~ul>li.slide-3 {
  opacity: 1;
  z-index: 2;
}

.slider>ul>li.slide-0 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-1 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-2 {
  background-color: #47d7ed;
}

.slider>ul>li.slide-3 {
  background-color: #47d7ed;
}

.slider>.slider-dot {
  position: relative;
  margin-top: -4vw;
  text-align: center;
  z-index: 300;
  font-size: 0;
}

.slider>.slider-dot>label {
  position: relative;
  display: inline-block;
  margin: 1vw 0.5vw;
  width: 1vw;
  height: 1vw;
  border-radius: 50%;
  background-color: #fff;
}

.slider>#input-slide-0:checked~.slider-dot>label.slide-0,
.slider>#input-slide-1:checked~.slider-dot>label.slide-1,
.slider>#input-slide-2:checked~.slider-dot>label.slide-2,
.slider>#input-slide-3:checked~.slider-dot>label.slide-3 {
  background-color: black;
}

.slider>.slider-dot>label:hover {
  background-color: #f73c3f !important;
}

.slider>.slide-description {
  position: absolute;
  width: 50%;
  top: calc(50% - 3vw);
  left: 25%;
  z-index: 200;
}

.slider>.slide-description>label {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  cursor: default;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.75s ease;
}

.slider>#input-slide-0:checked~.slide-description>.slide-0,
.slider>#input-slide-1:checked~.slide-description>.slide-1,
.slider>#input-slide-2:checked~.slide-description>.slide-2,
.slider>#input-slide-3:checked~.slide-description>.slide-3 {
  z-index: 2;
  opacity: 1;
  visibility: visible;
}

.slider>.slide-description>label>.text-slide {
  margin: 0 auto;
  line-height: 6vw;
  top: 0px;
}

@keyframes slide {
  0%,
  100% {
    opacity: 0;
  }
  6%,
  25% {
    opacity: 1;
    z-index: 2;
  }
  30%,
  50% {
    opacity: 0;
    z-index: 2;
  }
}

.slider>#input-slide-autoplay:checked~ul>li.slide-0 {
  animation: slide 32000ms infinite -2000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-1 {
  animation: slide 32000ms infinite 6000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-2 {
  animation: slide 32000ms infinite 14000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li.slide-3 {
  animation: slide 32000ms infinite 22000ms linear;
}

.slider>#input-slide-autoplay:checked~ul>li {
  transition: none;
}

@keyframes arrow {
  0%,
  24% {
    z-index: 1;
  }
  25%,
  100% {
    z-index: -1;
  }
}

@keyframes dot {
  0%,
  24% {
    background-color: #333;
  }
  25%,
  100% {
    background: #fff;
  }
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-0 {
  animation: dot 32000ms infinite -2000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-1 {
  animation: dot 32000ms infinite 6000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-2 {
  animation: dot 32000ms infinite 14000ms;
}

.slider>#input-slide-autoplay:checked~.slider-dot>label.slide-3 {
  animation: dot 32000ms infinite 22000ms;
}

@keyframes description {
  0%,
  5% {
    opacity: 0;
    z-index: 2;
    visibility: visible;
  }
  6%,
  24% {
    opacity: 1;
    z-index: 2;
    visibility: visible;
  }
  25%,
  100% {
    opacity: 0;
    z-index: 0;
    visibility: hidden;
  }
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-0 {
  animation: description 32000ms infinite -2000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-1 {
  animation: description 32000ms infinite 6000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-2 {
  animation: description 32000ms infinite 14000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>.slide-3 {
  animation: description 32000ms infinite 22000ms ease;
}

.slider>#input-slide-autoplay:checked~.slide-description>label {
  transition: none;
}

.readmorebutton {
  padding: 5px 15px;
  color: #fff;
  background-color: #C10E0E;
  display: inline-block;
  margin: 4px 0;
  text-decoration: none;
  border-radius: 3px;
}
<div class="slider">
  <input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-1" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-2" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-3" type="radio" class="input-slide input-slide-num" />
  <input name="input-slider" id="input-slide-autoplay" type="radio" class="input-slide" checked />
  <ul>
    <li class="slide-0"></li>
    <li class="slide-1"></li>
    <li class="slide-2"></li>
    <li class="slide-3"></li>
  </ul>
  <div class="slide-description">
    <label class="slide-0">
                    <h1 class="text-slide">Lorem Ipsum</h1>
                    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
                    <a href="{% url 'movies:movie_detail' movie.slug %}" class="readmorebutton">Read More</a>
                </label>
    <label class="slide-1">
                    <h1 class="text-slide">CSS SLIDER #2</h1>
                </label>
    <label class="slide-2">
                    <h1 class="text-slide">CSS SLIDER #3</h1>
                </label>
    <label class="slide-3">
                    <h1 class="text-slide">CSS SLIDER #4</h1>
                </label>
  </div>
  <div class="slider-dot">
    <label class="slide-0" for="input-slide-0"></label>
    <label class="slide-1" for="input-slide-1"></label>
    <label class="slide-2" for="input-slide-2"></label>
    <label class="slide-3" for="input-slide-3"></label>
  </div>
</div>

通过上述所有代码，我得到了以下输出：-

我正在尝试将H1、h5 和a 部分移到比现在略高的位置。

【问题讨论】：

    标签： javascript html jquery css slider


    【解决方案1】：

    只是降低了 CSS 中的最高值。

    .slider > .slide-description { 
  position: absolute;
  width: 50%; 
  top: calc(35% - 3vw); //===> you can adjust the top position according to your needs here
  left: 25%; 
  z-index: 200; 
}

    完整代码：

    @import url("https://fonts.googleapis.com/css?family=Audiowide|Monoton|Poiret+One|Raleway");
body {
    width: 100%;
    margin: 0 auto;
    font-family: "Raleway", sans-serif;
    color: #fff;
    font-size: 1.75vw;
}
body * {
    width: 100%;
    position: relative;
    display: block;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    z-index: 100;
}
h1 {
    font-size: 6vw;
    text-transform: uppercase;
    font-weight: normal;
}
ul,
li {
    list-style: none;
}
label {
    cursor: pointer;
}
input {
    display: none;
}

.slider {
    height: 25vw;
    overflow: hidden;
}

.slider > ul {
    height: 100%;
    z-index: 100;
}
.slider > ul > li {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;

    opacity: 0;
    z-index: 1;
    transition: all 2000ms ease;
}
.slider > #input-slide-0:checked ~ ul > li.slide-0,
.slider > #input-slide-1:checked ~ ul > li.slide-1,
.slider > #input-slide-2:checked ~ ul > li.slide-2,
.slider > #input-slide-3:checked ~ ul > li.slide-3 {
    opacity: 1;
    z-index: 2;
}
.slider > ul > li.slide-0 {
    background-color: #47d7ed;
}
.slider > ul > li.slide-1 {
    background-color: #47d7ed;
}
.slider > ul > li.slide-2 {
    background-color: #47d7ed;
}
.slider > ul > li.slide-3 {
    background-color: #47d7ed;
}


.slider > .slider-dot {
    position: relative;
    margin-top: -4vw;
    text-align: center;
    z-index: 300;
    font-size: 0;
}
.slider > .slider-dot > label {
    position: relative;
    display: inline-block;
    margin: 1vw 0.5vw;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;

    background-color: #fff;
}
.slider > #input-slide-0:checked ~ .slider-dot > label.slide-0,
.slider > #input-slide-1:checked ~ .slider-dot > label.slide-1,
.slider > #input-slide-2:checked ~ .slider-dot > label.slide-2,
.slider > #input-slide-3:checked ~ .slider-dot > label.slide-3 {
    background-color: black;
}
.slider > .slider-dot > label:hover {
    background-color: #f73c3f !important;
}
.slider > .slide-description {
    position: absolute;
    width: 50%;
    top: calc(35% - 3vw);
    left: 25%;
    z-index: 200;
}
.slider > .slide-description > label {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    cursor: default;

    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.75s ease;
}
.slider > #input-slide-0:checked ~ .slide-description > .slide-0,
.slider > #input-slide-1:checked ~ .slide-description > .slide-1,
.slider > #input-slide-2:checked ~ .slide-description > .slide-2,
.slider > #input-slide-3:checked ~ .slide-description > .slide-3 {
    z-index: 2;
    opacity: 1;
    visibility: visible;
}
.slider > .slide-description > label > .text-slide {
    margin: 0 auto;
    line-height: 6vw;
    top: 0px;
}

@keyframes slide {
    0%,
    100% {
        opacity: 0;
    }
    6%,
    25% {
        opacity: 1;
        z-index: 2;
    }
    30%,
    50% {
        opacity: 0;
        z-index: 2;
    }
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-0 {
    animation: slide 32000ms infinite -2000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-1 {
    animation: slide 32000ms infinite 6000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-2 {
    animation: slide 32000ms infinite 14000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li.slide-3 {
    animation: slide 32000ms infinite 22000ms linear;
}
.slider > #input-slide-autoplay:checked ~ ul > li {
    transition: none;
}

@keyframes arrow {
    0%,
    24% {
        z-index: 1;
    }
    25%,
    100% {
        z-index: -1;
    }
}

@keyframes dot {
    0%,
    24% {
        background-color: #333;
    }
    25%,
    100% {
        background: #fff;
    }
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-0 {
    animation: dot 32000ms infinite -2000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-1 {
    animation: dot 32000ms infinite 6000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-2 {
    animation: dot 32000ms infinite 14000ms;
}
.slider > #input-slide-autoplay:checked ~ .slider-dot > label.slide-3 {
    animation: dot 32000ms infinite 22000ms;
}

@keyframes description {
    0%,
    5% {
        opacity: 0;
        z-index: 2;
        visibility: visible;
    }
    6%,
    24% {
        opacity: 1;
        z-index: 2;
        visibility: visible;
    }
    25%,
    100% {
        opacity: 0;
        z-index: 0;
        visibility: hidden;
    }
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-0 {
    animation: description 32000ms infinite -2000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-1 {
    animation: description 32000ms infinite 6000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-2 {
    animation: description 32000ms infinite 14000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > .slide-3 {
    animation: description 32000ms infinite 22000ms ease;
}
.slider > #input-slide-autoplay:checked ~ .slide-description > label {
    transition: none;
}

.readmorebutton{
    padding: 5px 15px; 
    color:#fff; 
    background-color: #C10E0E; 
    display: inline-block; 
    margin: 4px 0; 
    text-decoration: none; 
    border-radius: 3px;
    }
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Trying</title>
        <link rel="stylesheet" href="style.css" />
    </head>

    <body>
        <div class="slider">
            <input name="input-slider" id="input-slide-0" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-1" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-2" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-3" type="radio" class="input-slide input-slide-num" />
            <input name="input-slider" id="input-slide-autoplay" type="radio" class="input-slide" checked />
            <ul>
                <li class="slide-0"></li>
                <li class="slide-1"></li>
                <li class="slide-2"></li>
                <li class="slide-3"></li>
            </ul>
            <div class="slide-description">
                <label class="slide-0">
                    <h1 class="text-slide">Lorem Ipsum</h1>
                    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h5>
                    <a href="{% url 'movies:movie_detail' movie.slug %}" class="readmorebutton">Read More</a>
                </label>
                <label class="slide-1">
                    <h1 class="text-slide">CSS SLIDER #2</h1>
                </label>
                <label class="slide-2">
                    <h1 class="text-slide">CSS SLIDER #3</h1>
                </label>
                <label class="slide-3">
                    <h1 class="text-slide">CSS SLIDER #4</h1>
                </label>
            </div>
            <div class="slider-dot">
                <label class="slide-0" for="input-slide-0"></label>
                <label class="slide-1" for="input-slide-1"></label>
                <label class="slide-2" for="input-slide-2"></label>
                <label class="slide-3" for="input-slide-3"></label>
            </div>
        </div>
    </body>
</html>

    【讨论】：

    • 你有正确的答案，但你能指出你具体改变了什么。有点难以发现，因为它位于 CSS 大块的中间。具体来说，它是.slider &gt; .slide-description 选择器中的top 值，差一半。
    • .slider > .slide-description { 位置：绝对；宽度：50%；顶部：计算（35% - 3vw）；左：25%； z 指数：200； } top 在这里被计算，所以你可以根据你的需要进行调整。
    猜你喜欢
    • 1970-01-01
    • 2021-01-29
    • 2014-06-03
    • 1970-01-01
    • 1970-01-01
    • 2012-06-01
    • 2016-06-24
    • 2023-02-01
    • 2010-12-17
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode