Place an element inside a div without taking up space

Question

I want to add an element to a div that is right aligned but sits atop the other element in the div. It's hard to explain but here are some images to clear it up:

You can see how Actions is being centered but because of the icon at the end it is not taking up the full width of the div. I am using Bootstrap columns currently but this is clearly not going to achieve what I need.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

<style>
.section-header {
            border-bottom: 1px solid var(--menu-dark);
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
            background-color: var(--menu-light);
            font-weight: bold;
        }

            .section-header .header-text {
                display: flex;
                justify-content: center;
            }
</style>

<div class="row section-header border border-dark">
  <div class="col header-text">Actions</div>
  <span class="col-auto"><a href="#" class="btn-edit"><span class="bi bi-pencil"></span></a>
  </span>
</div>
<div class="row border border-dark d-flex justify-content-center">
Test
</div>

You're probably looking for [absolute positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) — Lewis, Jun 22 '23 at 15:27

Md. Rakibul Islam · Answer 1 · 2023-06-22T16:09:26.317

Here is what you wanted:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<div class="row section-header justify-content-end">
  <div class="col header-text text-center position-absolute">Actions</div>
  <span class="col-auto"><a href="#" class="btn-edit"><span class="bi bi-pencil"></span></a>
  </span>
</div>

Edits:

I added "justify-content-end" to the row to right align the pencil
"position-absolute" to the element containing "actions" to bring it out of the normal flow and added "text-center" to bring it to the center

Place an element inside a div without taking up space

1 Answers1