Need to move heading over div-CodePudding

Need to move heading tag little left say 5px over the div. I have tried some solution but heading is moving but the content is disappearing .

<div>
  <div style="background: none;" class="taskdiv">
    <a>
      <img src="{{url '/' task.icon}}" class="img-fluid" />
      <h5 id= "heading" class=" text-center">{{task.taskname}}</h5>
    </a>
  </div>
</div>

#heading {
left: -5px;
position: absolute;
word-break: break-all;
inline-size: 130px;
height: 50px;
}

I have a div which is like a rectangle box with a background color and a heading inside it, I need to move the heading a little left heading has a background color too so it will be like the heading box will be a little left of the div box like heading placed over div .

CodePudding user response：

yeah just change the position to relative instead of absolute as absolute position break CSS default formatting context. "Run the code snippet below"

.taskdiv{
margin: 0 50px;
}

#heading {
  background-color: red;
  right: 40px;
  bottom: 20px;
  position: relative;
  word-break: break-all;
  inline-size: 130px;
  height: 50px;
}

<div>
  <div style="background: green;" class="taskdiv">
    <a>
          <img src="{{url '/' task.icon}}" class="img-fluid" />
          <h5 id="heading" class=" text-center">{{task.taskname}}</h5>
        </a>
  </div>
</div>

CodePudding user response：

You just need to give the z-index for heading then it will show there too and make the positive relative for div like this

. taskdiv{positive:relative}

#heading {
left: -5px;
position: absolute;
word-break: break-all;
inline-size: 130px;
height: 50px;
z-index:99
}

second this you can try without position

#heading {
    margin-left: -5px;
    height: 50px;
    z-index:99
    }

CodePudding user response：

You need to give x, y position so top: -5px and left: -5px or (some amount)

Then adjust the z-index so it will appear on top of the div z-index: 2

Absolute positioning is useful for breaking the element out of the flow

CodePudding user response：

I'm not exactly sure what you are talking about but I might know. I think what you are talking about is the margin in the html thats there by default.

body, html {
  margin: 0px;
}