边距/边距在一个div之外。

I have tried to use margin/padding (top 80% / bottom 20%) to position text about 20% above the bottom of the div. However it looks like it does not work this way, the margin/padding simply comes out of box instead of positioning the text as wanted.

我尝试过使用空白/填充(顶部80% /底部20%)将文本放置在div底部20%的位置上。但是看起来它不是这样工作的，空白/填充只是从方框中跳出来，而不是按需要定位文本。

I can position it at the center of the image using margin: 20% but I want to position it 20% above the bottom line as elseway the text keeps on moving around when I change resolution, sometimes it hides completely due to overflow.

我可以用边框把它放在图像的中心:20%但是我想把它放在底线以上20%的位置，因为当我改变分辨率时，文本会继续移动，有时由于溢出而完全隐藏。

Any suggestions on how to align just slightly above the bottom of the div? Preferably without using position: absolute as this setting messed up everything else for me.

对于如何对齐div底部稍高的位置有什么建议吗?最好不要使用位置:绝对的，因为这个设置把其他一切都搞砸了。

Fiddle

小提琴

.featured_title {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: auto;
    margin-top: 80%; /* this needs to be removed in order for text to become visible as currently it's hidden due to overflow:hidden */ 
    margin-bottom: 20%;
    font-size: 4vw;
    color: #000;
    width: 65%;
    text-align: center;
}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
    max-height: 500px;
    overflow: hidden;
}

.banner {
    max-height: inherit;
}

.banner {
    margin:auto;
    width: 80%;
    display: block;
    max-height: 500px;
    overflow: hidden;
}

.featured_image {
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%
}

<div class=browser>
    <div class="featured_box">
        <div class="banner" onclick="location.href=">
            <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
                <p class="featured_title">Text goes here</p>
            </div>
        </div>
    </div>
    <div class=browser>

4 个解决方案

#1

Specifying px instead of percentage in this case will fix the issues.

在这种情况下，指定px而不是百分比将解决问题。

You can view on codepen as well - https://codepen.io/Ilima/pen/gzVWJB?editors=1100

您也可以在codepen上查看—https://codepen.io/Ilima/pen/gzVWJB?editors=1100

.featured_box {
  max-height: 500px;
  overflow: hidden;
  position: relative;
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}

.featured_image {
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg);
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
    width: 100%;
}
.featured_image:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
}

.featured_title{
  margin-top: 360px;
  position: relative;
  z-index: 1;
  font-size: 2rem;
  color: #fff;
  text-align: center;
}

<div class="featured_box">
  
  <div class="featured_image">
      <p class="featured_title"> Text goes here </p>
  </div>
</div>

<div class="browser"></div>

#2

I have added "top" and "position" element to your code and removed margins Is this what you are looking for? I mean Text just above the div of your Image

我已经在你的代码中添加了“top”和“position”元素，并删除了空白处，这就是你要找的吗?我的意思是，文本就在你的图像的div之上。

 

   * ..featured_title {
-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;   <!---added position -->
    top: 450px;           <!-- added top --> 
    font-size: 4vw;
    color: #000;
    width: 65%;
    text-align: center;

}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
    max-height: 500px;
overflow: hidden;
}

.banner {
max-height: inherit;
}

.banner {
margin:auto;
  width: 80%;
  display: block;
max-height: 500px;
overflow: hidden;
}

.featured_image {
overflow: hidden;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
height: 500px;
width: 100%
}

<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

#3

Is this what you want?

这是你想要的吗?

I added the following CSS to .featured-image:

我在.featured-image中添加了以下CSS:

display: flex;
flex-direction: column;
justify-content: flex-end;
padding-bottom: 20%;

* {
  box-sizing: border-box;
}

.featured_title {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  font-size: 4vw;
  color: #000;
  text-align: center;
  color:white;
  
}

.browser {
  width: 1366px;
  height: 768px;
}

.featured_box {
  max-height: 500px;
  overflow: hidden;
}

.banner {
  max-height: inherit;
}

.banner {
  margin: auto;
  width: 80%;
  display: block;
  max-height: 500px;
  overflow: hidden;
}

.featured_image {
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 500px;
  width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20%;
}

<div class=browser>
  <div class="featured_box">
    <div class="banner" onclick="location.href=">
      <div class="featured_image" style="background-image: 
 url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg/1024px-Mount_Everest_as_seen_from_Drukair2_PLW_edit.jpg)">
        <p class="featured_title">Text goes here</p>
      </div>
    </div>
  </div>
  <div class=browser>

#4

here is the code for you:

这是给你的代码:

<body>

      <div class="container-fluid img-responsive">
        <div class="row">
          <div class="col-4 col-sm-4 " ></div>
          <div class=" col-4 col-sm-4" ><img src="4.jpg"> </div>
       </div>
       <div class="row">
        <div class=" col-4 col-sm-4 " ></div>
        <div class=" col-4 col-sm-4" >text goes here</div>
       </div>
      </div>

</body>

you can resize the window to see responsiveness: https://jsfiddle.net/3myfa6fe/

您可以调整窗口大小以查看响应性:https://jsfiddle.net/3myfa6fe/

and mind you I am using bootstrap for it .Please add the required libraries for it from CDN bootstrap page.this is a very small code understandable rather than taking up those big html css code pieces.all the best.

请注意我使用的是bootstrap，请从CDN引导页面添加所需的库。这是一个可以理解的非常小的代码，而不是占用那些大的html css代码片段。愿一切都好！