adverse offset and backdrop

Question

adverse offset and backdrop

To achieve the desired layout, I am trying to adjust the negative margin for the .text div so that it aligns on top of the .image div.

<div class="wrap">
    <div class="image"><img src="imgage.jpg" /></div>
    <div class="text">text with background</div>
</div>


.image {
    overflow: hidden;
}

.text{
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
}

Despite setting the background for the .text, it does not display over the image as intended. Currently, only the text is visible in the given setup. You can view the issue here: http://jsfiddle.net/ovkn4egc/

I am seeking solutions to resolve this problem without resorting to using absolute positioning. Thank you.

html css

Answer 1

Answer №1

To achieve the desired effect, simply include position:relative; in your CSS for the .text element.

See it in action here

* {
    margin: 0;
    padding: 0;
}
.image {
    overflow: hidden;
}
.image img {
    display: block;
}
.text {
    position:relative;
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
}

<div class="wrap">
    <div class="image">
        <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
    <div class="text">text with background</div>
</div>

Answer 2

To achieve the desired effect, simply include position:relative; in your CSS for the .text element.

See it in action here

* {
    margin: 0;
    padding: 0;
}
.image {
    overflow: hidden;
}
.image img {
    display: block;
}
.text {
    position:relative;
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
}

<div class="wrap">
    <div class="image">
        <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
    <div class="text">text with background</div>
</div>

Answer 3

Answer №2

Here is the updated version:

<div class="wrap">
     <div class="text">text with background</div>
    <div class="image">
    <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}

.image {
    overflow: hidden;
}

.image img{
    display: block;
}

.text{
    background: green;
    padding: 20px;
    color: #FFFFFF;
    overflow: hidden;
    position:relative;
    top: 0;
}

Link to view the code on jsfiddle

Answer 4

Here is the updated version:

<div class="wrap">
     <div class="text">text with background</div>
    <div class="image">
    <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}

.image {
    overflow: hidden;
}

.image img{
    display: block;
}

.text{
    background: green;
    padding: 20px;
    color: #FFFFFF;
    overflow: hidden;
    position:relative;
    top: 0;
}

Link to view the code on jsfiddle

Answer 5

Answer №3

To ensure the text spans only the width of the image, a few adjustments need to be made as outlined below.

It seems like this is the desired behavior:

VIEW DEMO

The HTML code needs to be modified slightly:

<div class="wrap">
    <div class="image">
    <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
            <div class="text">text with background</div>
    </div>
</div>

In the CSS for the image div, the position property should be set to absolute:

.image {
    overflow: hidden;    
    position: absolute;
}

Additionally, the position property for the text element needs to be adjusted as follows:

.text{
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}

Answer 6

To ensure the text spans only the width of the image, a few adjustments need to be made as outlined below.

It seems like this is the desired behavior:

VIEW DEMO

The HTML code needs to be modified slightly:

<div class="wrap">
    <div class="image">
    <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
            <div class="text">text with background</div>
    </div>
</div>

In the CSS for the image div, the position property should be set to absolute:

.image {
    overflow: hidden;    
    position: absolute;
}

Additionally, the position property for the text element needs to be adjusted as follows:

.text{
    background: green;
    padding: 20px;
    margin-top: -60px;
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
}

Answer 7

Answer №4

Update your CSS with the following code:

*{
  margin: 0;
  padding: 0;
}
.wrap{position:relative;}
.image {
   overflow: hidden;
}

.image img{
  display: block;
}

.text{
  background: green;
  padding: 20px;
  top: 0px;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

Also, make sure to update your HTML as shown below:

<div class="wrap">
    <div class="text">text with background</div>
    <div class="image">
      <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>

The reason why I set .wrap as relative is because the text div should be positioned relative to the wrap div. If you only use absolute for the text div, it will be positioned according to the body.

Answer 8

Update your CSS with the following code:

*{
  margin: 0;
  padding: 0;
}
.wrap{position:relative;}
.image {
   overflow: hidden;
}

.image img{
  display: block;
}

.text{
  background: green;
  padding: 20px;
  top: 0px;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  width: 100%;
}

Also, make sure to update your HTML as shown below:

<div class="wrap">
    <div class="text">text with background</div>
    <div class="image">
      <img src="https://farm8.staticflickr.com/7550/15615231269_e5a66cbe16_z.jpg" />
    </div>
</div>

The reason why I set .wrap as relative is because the text div should be positioned relative to the wrap div. If you only use absolute for the text div, it will be positioned according to the body.

adverse offset and backdrop

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Determining in Angular 8 whether a value has been altered by a user or by a method call

PHP and Ajax Form Submission Directing to Backend PHP Script

The ng-repeat function is unable to fetch data from a JSON file

What steps should I take to address the issues with my quiz project?

Firefox compatibility issue: Bootstrap modal button not functioning properly when wrapping other HTML elements

Learn the method for printing CSS outlines and background colors in IE8 using JQuery's printElement feature

Automatically generating table through CSV file upload utilizing MySQL and PHP

Tips for getting the DIV:hover effect to work in Internet Explorer 8

Updating div width in Laravel blade using expressions or jQuery can be a simple task

Angular CSS: ng-style applied to only one side, the other remains unaffected

Is there a way to seamlessly transition between different Angular components without having to refresh the entire webpage?

VSCode is indicating a CSS error, requesting an at-rule or selector

HTML5 CSS and Rails theme

Encountering a Jquery TypeError while trying to update the content on

Differences in background-size among various browsers

After incorporating some movement effects into my menu, suddenly none of the buttons were responding

jQuery not targeting absolute positioned duplicates of the <div>'s

The entry description function is not functioning properly when used with jGFeed

Implementing a JQuery script that triggers every time there is a change in the scroll

I could use some help with understanding node.js scripts, running processes, and other related tasks