placing one div on top of another div

I am facing a challenge in positioning the share div as shown in the image above. I have tried using position absolute with bottom and left, but adjusting the px values is proving to be frustrating as the output always ends up either stacked on top or at the bottom. How can I achieve a layout similar to the one in the picture?

https://i.sstatic.net/MDyam.jpg

:root {
  --VeryDarkGrayishBlue: hsl(217, 19%, 35%);
  --DesaturatedDarkBlue: hsl(214, 17%, 51%);
  --GrayishBlue: hsl(212, 23%, 69%);
  --LightGrayishBlue: hsl(210, 46%, 95%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

body {
  background-color: var(--GrayishBlue);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px;
}

.container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  max-width: 1150px;
  max-height: 390px;
  margin: auto;
  background-color: white;
  overflow: hidden;
  border-radius: 0.8em;
}

.img-box {}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-box {
  padding: 8%;
}

.text {
  padding-bottom: 30px;
}

.title {
  color: var(--VeryDarkGrayishBlue);
  padding-bottom: 10px;
}

.subtitle {
  color: var(--GrayishBlue);
  font-size: 1.1em;
}

.writer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.name {
  margin-left: 12px;
}

.name h4 {
  color: var(--VeryDarkGrayishBlue);
}

.name p {
  color: var(--GrayishBlue);
}

.share {
  margin-left: auto;
}

.share-icon button {
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--LightGrayishBlue);
  cursor: pointer;
}

.share-option {
  width: 250px;
  height: 40px;
  background: var(--VeryDarkGrayishBlue);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  position: absolute;
  bottom: ;
}
<main class="container">
  <div class="img-box">
    <img src="/images/drawers.jpg" alt="" />
  </div>
  <div class="text-box">
    <div class="text">
      <h1 class="title">
        Shift the overall look and feel by adding these wonderful touches to furniture in your home
      </h1>
      <p class="subtitle">
        Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
      </p>
    </div>
    <div class="footer">
      <div class="writer">
        <img src="/images/avatar-michelle.jpg" alt="" />
      </div>
      <div class="name">
        <h4>Michelle Appleton</h4>
        <p>28 Jun 2020</p>
      </div>
      <div class="share">
        <div class="share-icon">
          <button><img src="/images/icon-share.svg" alt=""></button>
        </div>
        <div class="share-option hidden">
          <span>Share</span>
          <a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
            <a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
              <a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
        </div>
      </div>
    </div>
  </div>
</main>

htmlcss

Answer №1

After tweaking the code, I managed to make the popup visible using the absolute positioning.

:root {
  --VeryDarkGrayishBlue: hsl(217, 19%, 35%);
  --DesaturatedDarkBlue: hsl(214, 17%, 51%);
  --GrayishBlue: hsl(212, 23%, 69%);
  --LightGrayishBlue: hsl(210, 46%, 95%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Manrope", sans-serif;
}

body {
  background-color: var(--GrayishBlue);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px;
}

.container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  max-width: 1150px;
  max-height: 390px;
  margin: auto;
  background-color: white;
  border-radius: 0.8em;
}
.container:after {
  display: block;
  content: '';
  clear: both;
}

.img-box {}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-box {
  padding: 8%;
}

.text {
  padding-bottom: 30px;
}

.title {
  color: var(--VeryDarkGrayishBlue);
  padding-bottom: 10px;
}

.subtitle {
  color: var(--GrayishBlue);
  font-size: 1.1em;
}

.writer img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.name {
  margin-left: 12px;
}

.name h4 {
  color: var(--VeryDarkGrayishBlue);
}

.name p {
  color: var(--GrayishBlue);
}

.share {
  margin-left: auto;
  position: relative;
  padding: 20px 0 0;
}

.share-icon button {
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--LightGrayishBlue);
  cursor: pointer;
}

.share-option {
  width: 250px;
  height: 40px;
  background: var(--VeryDarkGrayishBlue);
  border-radius: 10px;
  color: white;
  position: absolute;
  bottom: 100%;
  right: 50%;
  transform: translatex(50%);
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}

.share-option:after {
  top: 100%;
    left: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-top-color: var(--VeryDarkGrayishBlue);
    border-width: 10px;
    margin-left: -10px;
}

.share:hover .share-option {
  visibility: visible;
  opacity: 1;
}
<main class="container">
  <div class="img-box">
    <img src="/images/drawers.jpg" alt="" />
  </div>
  <div class="text-box">
    <div class="text">
      <h1 class="title">
        Shift the overall look and feel by adding these wonderful touches to furniture in your home
      </h1>
      <p class="subtitle">
        Ever been in a room and felt like something was missing? Perhaps it felt slightly bare and uninviting. I’ve got some simple tips to help you make any room feel complete.
      </p>
    </div>
    <div class="footer">
      <div class="writer">
        <img src="/images/avatar-michelle.jpg" alt="" />
      </div>
      <div class="name">
        <h4>Michelle Appleton</h4>
        <p>28 Jun 2020</p>
      </div>
      <div class="share">
        <div class="share-icon">
          <button><img src="/images/icon-share.svg" alt=""></button>
        </div>
        <div class="share-option hidden">
          <span>Share</span>
          <a href="#"> <img src="/images/icon-facebook.svg" alt=""> <a/>
            <a href="#"> <img src="/images/icon-pinterest.svg" alt=""> <a/>
              <a href="#"> <img src="/images/icon-twitter.svg" alt=""> <a/>
        </div>
      </div>
    </div>
  </div>
</main>

Answer №2

It seems like JavaScript is necessary for this task.

To properly position the share option, you can nest it within the share icon using absolute positioning inside a relative container. This will ensure the option is positioned relative to the button.

            <div class="share">
                <div class="share-icon">
                    <button>
                        <img src="/images/icon-share.svg" alt="">
                    </button>
                    <div class="share-option hidden">
                        <span>Share</span>
                        <a href="#"><img src="/images/icon-facebook.svg" alt=""></a>
                        <a href="#"><img src="/images/icon-pinterest.svg" alt=""></a>
                        <a href="#"><img src="/images/icon-twitter.svg" alt=""></a>
                    </div>
                </div>
            </div>

and here is the accompanying CSS code:

        .share-icon {
            position: relative;
        }
        .share-icon button {
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--LightGrayishBlue);
            cursor: pointer;
        }
        .share-option {
            width: 250px;
            height: 40px;
            background: var(--VeryDarkGrayishBlue);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            position: absolute;
            top: -40px;
            z-index: 100;
        }

The issue lies in the options staying within the boundaries of the relative container and not extending to the right side.

A possible solution could be making the options appear outside the container by placing them in the body with 'display: none'. Upon clicking (or hovering) the button, you can determine its position and position the options accordingly on top of it using flex display.

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

Getting the IDs of selected nodes all the way up to the root node in jsTree

How can I retrieve the IDs of all parent nodes from a selected node to the root node in jsTree? If node C is selected, how can I obtain the IDs of all its parent nodes? Tree Structure: B C +C1 +c2 The following code snippet only returns the imme ...

javascriptjqueryhtmljquery-uijstree

Avoid the URL colon being converted to %3A

Is it possible to pass a colon from one form to another through a hyperlink without ending up as %3A? It seems like the link keeps converting it to %3A. For instance, currently: Attempting to achieve: current: ...

htmlformsurl

What is the best way to vertically align the second row in a carousel using Tailwind CSS?

Currently, I am working on developing an up-and-down carousel with Tailwind CSS. However, I am encountering a challenge in aligning the elements in the second row of my grid. My main objective is to have these elements centered vertically within the grid. ...

cssreactjstailwind-css

Stylish Combobox with jQuery and CSS

Seeking assistance in creating a stylish combo box using CSS and jQuery. The combo box will contain 3 items, and I need guidance on how to select items within the combo box and display the selected item. Any help or suggestions would be greatly appreciated ...

jquerycsscombobox

Having trouble getting the img file to show up in the img tag - the src URL is not updating

<div class="col-lg-3 col-md-4 pl-md-1"> <label class="ORGAd16-preview"> input type='file' name="modelvariant_file" id="imageUpload" accept=".png, .jpg, .jpeg" > <img id="ima ...

htmljquerylaravel

How to integrate half-star ratings in Ionic

Recently, I have been struggling with implementing half stars in the rating module of my Ionic mobile application. When the average rating is not a whole number, I opted to round it off and display an Ionic icon star. Below are snippets of the code I curre ...

cssangularjstypescriptionic-frameworkionic2

Utilizing HTML and CSS for Optimal Page Layouts

<div id="pageHeading"> <h1>zisland</h1> <img src="islandpic.jpg" alt="Mountain View" style="width:50px;height:50px"> </div> #pageHeading{ color: #000000; width: auto; height: auto; text-align: center; ...

htmlcss

Preserve the button interface when it is clicked

Just diving into the world of CSS for the first time with a front end styling task, so apologies in advance for any errors or misunderstandings! I have a placeholder button that triggers a Modal (1): https://i.sstatic.net/1wT9Y.png When clicked, the but ...

cssbuttonbootstrap-4

Static checks do not apply to CSS variables

Our webtech class assignment is to create a static webpage that meets the criteria of the jigsaw w3c css validator. We've encountered a roadblock while trying to resolve the final warning message: Due to their dynamic nature, CSS variables are curre ...

css

JavaScript is throwing undefined when trying to access object properties

Here are some HTML elements that I frequently work with: <TD id=Cell.0.0> <DIV></DIV> <IMG id=_Q0_C0_mrSingleImg src="radio.gif"> <INPUT type="checkbox" na ...

javascriptjqueryhtml

When clicked, the menu disappears successfully with the "show" functionality, but unfortunately, the "hide" feature is not working as intended

Within my menu, I have a section for portfolios that transforms into a dropdown on desktop hover and mobile click. The issue arises on mobile devices where the first click displays the menu correctly, but subsequent clicks do not trigger any change. I att ...

javascriptjquerycssdrop-down-menuclick

Utilizing the style attribute instead of a class for tag styling

Currently working on an app utilizing ASP.NET Web Forms and aiming to incorporate bootstrap.css for styling purposes. However, encountering issues with button properties conflicting between the default Style.css and bootstrap. This is the HTML markup: &l ...

asp.netcsstwitter-bootstrap

The radio button is not appearing correctly in my HTML form

Seeking guidance as a newcomer to html and css. Looking to create a signup form using html and css, but encountering issues with the radio button not displaying in the browser. Unsure of the root cause of the problem. Any assistance would be greatly apprec ...

javascripthtmlcssradio-button

"When hovering over an image, it enlarges and appears on top of other images on the

When setting up my homepage in Chrome, I decided to use an HTML page with icons for quick access to my most used websites. Wanting to make it more dynamic and visually appealing, I made some changes by rounding the corners of the icons and graying them out ...

htmlcssimagehover

Issue: The HTML is not displaying correctly when using the Bootstrap framework

I am facing an issue with two bootstrap ul's, where one is properly beautified while the other is not. The problem lies in why the first ul is not rendering correctly and lacking proper spacing. In the fiddle example provided below, you can see that t ...

htmlcsstwitter-bootstrap

I'm having trouble getting my button to work with addEventListener while using Ejs and Express. What could

Creating a Twitter-like platform where I can post tweets and have them display on the same page has been quite challenging. I've set up each post to have an Edit button initially hidden with 'display:none'. However, when I try to click on th ...

javascripthtmlnode.jsexpressejs

Permitting the user to remove an option from the antd select widget

I have integrated the antd select component in my React application and I am looking to add a delete option for users. For more details, please refer to the image below:https://i.sstatic.net/ZP4PP.png This is how I attempted to implement it: {tasks.map( ...

cssreactjsselectantd

Acquiring the applicable CSS for a JavaFX 8 widget

While working on JavaFX styling with CSS, I encountered a challenge in understanding which CSS properties are directly affecting the appearance of a GUI widget. It reminded me of using Firefox web developer tools to inspect elements and view the specific s ...

javacssjavafx-8

Attempting to create a visually appealing gallery using a lightbox feature, but unfortunately, the images are not

Just starting out with Angular and I'm working on creating a gallery with a lightbox that pops up when an image is clicked. I've tried using examples with bootstrap and also attempted to code it myself. However, whenever I click on the image lin ...

htmlangularbootstrap-4routesallow-modals

Creating personalized user profiles with a combination of PHP and HTML

I am seeking a solution for my register and login page which utilizes PHP scripts and stores data in a MySQL database. Currently, when each member logs in, they are directed to the same generic members page. How can I customize the system to take each memb ...

phphtmlmember