在不使用绝对定位的情况下让文本位于视频标签上
Getting Text to sit over a video tag without using absolute positioning
我试图在不使用绝对定位的情况下让一些文本位于视频之上。我试图避免绝对定位,因为我的文本上方有一些菜单项设置为 justify-content: space around;如果我将文本设置为绝对定位并给它一个 %offset left or right,上面的项目就会与视频中的文本不同步。这是 html 我正在与
合作
.service-tabs-group {
display: flex;
justify-content: space-around;
}
.service-tabs-group div div:last-child {
display: block;
text-align: center;
}
.media-section-group {
height: 300px;
overflow: hidden;
position: relative;
}
video.background-video {
width: 100%;
}
.field.field--field_mediatitle {
position: absolute;
left: 35%;
top: 10%;
font-size: 24px;
color: #f47b20;
}
<div class="service-tabs-group">
<div class="tab-1-group">
<div class="field field--field_tab1type">
<img class="program-details">
</div>
<div class="field field--field_tabtitle">
Program Details</div>
</div>
<div class="tab-2-group">
<div class="field field--field_tab2type">
<img class="process">
</div>
<div class="field field--field_tab2title">
EPD Process</div>
</div>
<div class="tab-3-group">
<div class="field field--field_tab3type">
<img class="benefits">
</div>
<div class="field field--field_tab3title">
Benefits</div>
</div>
</div>
<div class="media-section-group">
<div class="field field--field_mediatitle">
See what our clients are saying about us</div>
<div class="field field--field_backgroundvideo">
<video class="background-video" src="http://domain.dd:8082/files/lake_and_clouds_test1.1.mp4" poster="/files/bendingthecurve.jpg" autoplay="" loop="">
<img src="/files/bendingthecurve.jpg">
</video>
</div>
<div class="field field--field_mediaimage">
</div>
</div>
我试过设置应该覆盖视频的文本以显示块,并使用文本对齐属性将其居中。然后我给它一个 - margin-bottom,它应该将它向下发送到视频上方,但它总是隐藏在视频后面。有谁知道为什么它在后面而不是结束吗?
Relatively/static 定位元素的 stacking order 由它们在 DOM 中出现的顺序决定。较低的元素具有较高的堆叠顺序,因此您的视频容器将显示 "over" 它之前的同级元素。
绝对定位才是真正的方法。您发布的代码在我的本地测试中似乎运行良好。
我试图在不使用绝对定位的情况下让一些文本位于视频之上。我试图避免绝对定位,因为我的文本上方有一些菜单项设置为 justify-content: space around;如果我将文本设置为绝对定位并给它一个 %offset left or right,上面的项目就会与视频中的文本不同步。这是 html 我正在与
合作.service-tabs-group {
display: flex;
justify-content: space-around;
}
.service-tabs-group div div:last-child {
display: block;
text-align: center;
}
.media-section-group {
height: 300px;
overflow: hidden;
position: relative;
}
video.background-video {
width: 100%;
}
.field.field--field_mediatitle {
position: absolute;
left: 35%;
top: 10%;
font-size: 24px;
color: #f47b20;
}
<div class="service-tabs-group">
<div class="tab-1-group">
<div class="field field--field_tab1type">
<img class="program-details">
</div>
<div class="field field--field_tabtitle">
Program Details</div>
</div>
<div class="tab-2-group">
<div class="field field--field_tab2type">
<img class="process">
</div>
<div class="field field--field_tab2title">
EPD Process</div>
</div>
<div class="tab-3-group">
<div class="field field--field_tab3type">
<img class="benefits">
</div>
<div class="field field--field_tab3title">
Benefits</div>
</div>
</div>
<div class="media-section-group">
<div class="field field--field_mediatitle">
See what our clients are saying about us</div>
<div class="field field--field_backgroundvideo">
<video class="background-video" src="http://domain.dd:8082/files/lake_and_clouds_test1.1.mp4" poster="/files/bendingthecurve.jpg" autoplay="" loop="">
<img src="/files/bendingthecurve.jpg">
</video>
</div>
<div class="field field--field_mediaimage">
</div>
</div>
我试过设置应该覆盖视频的文本以显示块,并使用文本对齐属性将其居中。然后我给它一个 - margin-bottom,它应该将它向下发送到视频上方,但它总是隐藏在视频后面。有谁知道为什么它在后面而不是结束吗?
Relatively/static 定位元素的 stacking order 由它们在 DOM 中出现的顺序决定。较低的元素具有较高的堆叠顺序,因此您的视频容器将显示 "over" 它之前的同级元素。
绝对定位才是真正的方法。您发布的代码在我的本地测试中似乎运行良好。