CSS: Using absolute and relative positioning within a parent element can result in elements overlapping

I want to create a box in html/css where the read more hyperlink text is positioned over the background image. The goal is to have additional text added to the description without overlapping the image.

Here's an example of the current issue.

Currently, the description is overlapping the image position.

Does anyone know how I can adjust it so that the read-more text and image are displayed below each other instead of overlapping?

Here's the HTML code:

        <div class="box">
            <div class="box-cont>
                <span class="content-type"></span>
                <h2 itemprop="name">Test limit thingTest limit thingTest ...</h2>
                <p class="meta">By random name, and random, on 7 Random 2018</p>

                <p class="desc" itemprop="description">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass ... house...</p>

                <span class="img"><img src="/assets/image.jpg" alt="Screen bw"></span>

                <p class="cta"><span>+ read more</span></p>

            </div>
        </div>
    </a>

And here's the CSS code:

.box-wrap {
    margin-bottom: 10px;
    display: block;
    text-decoration: none;
    color: #1e5373;
}

.section-boxes .box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.box p, .box h2, .box .content-type {
    position: relative;
    z-index: 2;
}

.box .img img {
    display: block;
    width: 100%;
    height: auto;
}
img {
    max-width: 100%;
    height: auto;
}

.section-boxes .box .cta {
    position: absolute;
    bottom: 30px;
}

This setup controls the positioning within the boxes by adjusting the z-index for the description and read more box elements.

Answer №1

Based on your revision, the CSS modifications are highlighted below.

Add

<p class="cta"><span>+ read more</span></p>
above
<div class="img"><img src="/assets/image.jpg" alt="Screen bw"></div>
.

Make sure to close the paragraph with </p> before opening <p class="cta">.

With this change, the +read more will overlay the background image but not the description (you can test this by adding more text to the description).

box-wrap {
  margin-bottom: 10px;
  display: block;
  text-decoration: none;
  color: #1e5373;
}
.cta {
  background: yellow;
}
.section-boxes .box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
box p,
.box h2,
.box .content-type {
  position: relative;
  z-index: 2;
}
.box .img img {
  display: block;
  width: 100%;
  height: auto;
}
img {
  max-width: 100%;
  height: auto;
  /* add these, adjust margin as desired*/
  margin-top: -34px;
  position: absolute;
  right: 0;
  z-index: -1;
}
.section-boxes .box .cta {
  position: absolute;
  bottom: 30px;
}
<div class="box boxed-">
  <div class="box-cont">
    <span class="content-type"></span>
    <h2 itemprop="name">Test limit thingTest limit thingTest limit thingTest limit thingTest..</h2>
    <p class="meta">By random name, and random, on 7 Random 2018</p>
    <p class="desc" itemprop="description">Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass ************' house, ******' up th</p>
    <p class="cta"><span>+ read more</span>
    </p>
    <div class="img">
      <img src="/assets/image.jpg" alt="Screen bw">
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error at line 72 of proxyConsole.js is: TypeError - Unable to access the 'default' property of an undefined object

I am new to using react redux loading bar and redux forms After clicking a button, I want the loading bar to display. The issue arises when I try to load the loading bar, resulting in the following error message: proxyConsole.js:72 TypeError: Cannot read p ...

Toggle the hamburger menu using JavaScript

How can I close my hamburger menu when clicking a link for one page navigation? The menu is functioning properly, but I need a way to close it. Unfortunately, I have limited knowledge of JS. I only have the HTML and CSS for this: HTML in index.html file ...

CSS: ways to set a maximum height for a datalist container

Hello, I have a datalist with over 100 options and I would like to set a maximum height for it to ensure the design looks tidy. Can anyone please help me out with this? Thank you! <input type="text" list="suggestions" class="f ...

Extracting information from a JSON file is a straightforward process that involves accessing

After spending months trying to extract data from a JSON file, here is what I have encountered: [["wrere","bogdan12",31,21,"profile_pic/poza3.jpg",78,21,31,"profile_pic/download.jpg"] , ["hey men","bogdan12",31,21,"profile_pic/poza3.jpg",76,21,31,"pro ...

The Jquery Mobile 1.4.5 virtual keyboard on the device is causing the form inputs at the bottom of the page to become hidden

I am currently working on a web app using JQuery Mobile 1.4.5. Encounter an issue that seems to be related to either the browser or JQM bug specifically when using Google Chrome in fullscreen mode on Android (v.4.4.2). Upon clicking on the Click Here!! ...

What is the best way to animate my logo using JavaScript so that it scales smoothly just like an image logo

I dedicated a significant amount of time to create a unique and eye-catching logo animation for my website! The logo animation I designed perfectly matches the size of the logo image and can be seamlessly integrated into the site. The issue arises when th ...

Why is it that the edit or delete button is not functioning when I attempt to click on the next page?

Having an issue with my script. It works fine for editing and deleting on the first page, but when I navigate to the next page, those functionalities stop working. Can anyone help me troubleshoot this problem? <script> $(function(){ $(&ap ...

Center a specific item by aligning it with flex

I'm struggling to achieve a simple layout using flexbox, and I can't figure out how to do it. My objective is to have 3 divs aligned in a row, with the middle div (containing "short") centered. A visual representation would make it clearer: The ...

How can you design an input type text to resemble a select dropdown?

Is there a way to customize an input type=text element to appear as a dropdown? Currently, I have a text box that, when clicked, displays options using jQuery and a div. I want the text box to include a dropdown icon to mimic a traditional dropdown menu. ...

Maintaining the layout of blank lines in HTML content within JEditorPane

It has come to my attention that in an HTML JEditorPane, when there is an empty line, any previously applied styling disappears. Take a look at the code snippet below: import javax.swing.JEditorPane; import javax.swing.JFrame; import javax.swing.SwingUtil ...

What is the best way to center the 'email promo' text in the top navigation bar alongside the image and other text links?

Struggling with learning CSS and HTML, particularly when it comes to positioning elements on the page. I'm having trouble vertically aligning the elements inside the top nav bar and can't seem to figure out what I'm doing wrong. Any insights ...

External CSS File causing improper sizing of canvas image

I have been working on implementing the HTML5 canvas element. To draw an image into the canvas, I am using the following javascript code: var img = new Image(); var canvas = this.e; var ctx = canvas.getContext('2d'); img.src = options.imageSrc; ...

Displaying content generated by Html.Raw in MVC4 using JavaScript and AJAX is causing displacement of content within the <a> tags in the HTML

My project includes a feature where emails sent to a specific address are parsed, with attachments saved to the network and metadata stored in a database. If the serial number of a finished good matches the one included in the email, a note is generated an ...

Modifying the color of the Payment Button in a Stripe Pop-up

I have successfully implemented the Stripe payment method on my leadpages, and everything is functioning well. However, I would like to customize the color of the Pay button to match the design in the attached image. https://i.sstatic.net/4mDrH.png Below ...

Ways to eliminate the Horizontal scroll bar

Currently, I am in the process of transforming a Static Page into a Responsive Page. However, when I resize my page to a lower width, I notice that a horizontal scroll-bar appears along with some margins at the bottom and right side of the last div/Footer. ...

Unable to expand or collapse rows in ng-table

Looking to implement an expand and collapse feature for ng-table, where clicking on a row should expand it to show more detail. However, currently all rows expand on click. Any ideas on how to achieve this? Any assistance would be greatly appreciated, tha ...

Is there a way for the React select component to adjust its width automatically based on the label size?

After defining a React select component, it looks like this: <FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id=&quo ...

Images in CSS accordion not displaying correctly in WordPress website

It seems like I am overlooking a simple solution here, but it's escaping me. I'm attempting to make a CSS accordion function where each section links to a page. If you want to view the source refer to this link Here is my test site URL: this l ...

execute the function based on the given ID

I've been attempting to dynamically add content using a function. My goal is for the content with the same anchor ID as the clicked anchor to be added, but it seems like nothing is happening. Is there a more effective approach to achieve this? $(&a ...

What is the best way to arrange a number of inline-block elements with equal size in a vertical alignment?

My goal is to display a set number of items in a container, all with the same fixed size. The challenge arises when the content of each item varies in length, causing misalignment vertically: .child { display: inline-block; background: #bbbbbb; marg ...