1

Context

I'm trying to show an icon icon-delete-2a.png on the border of a div.

  • I can't seem to bring the icon forward using z-index.
  • Furthermore I am also looking at 'the best way' to dynamically position the icon using CSS. When innerText would equal "TestTestTest", the width of my userItem is adjusted, but the icon should shift to the right as well. Calculating the length of the userItem with JS to then adjust it's style ain't that practical.

Related issues

Several other people asked about this, but unfortunately, the proposed solutions (setting position: relative; on the parent and setting position: absolute; z-index: 1 on the child) didn't seem to resolve my issue. See:

  1. CSS - Add icon on left of border with relative position
  2. z-index not working with fixed positioning
  3. Position div on the border of another div

Minimal Working Example

.useritem {
  position: relative;
  height: 15.625px;
  padding-left: 6.25px;
  padding-right: 6.25px;
  display: inline-block;
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  background: #ff0000;
  /* Center slide text vertically */
  align-items: center;
  border: 1px solid #ff0000;
  border-radius: 10px;
  margin-bottom: 1px;
  margin-right: 3px;
  overflow: auto;
  word-wrap: break-word;
}

.icon_delete {
  position: absolute;
  bottom: 7.5px;
  left: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.useritem:focus {
  background: #ffffff;
  color: #000000;       
  border-radius: 10px;
  border: 1px solid #000000;
}

[contenteditable] {
  outline: 0px solid transparent;
}
<body>
<div class="useritems">
    <div class="row">
        <div class="useritem" id="Location_Explore_UserItem_00" contenteditable="true" style="border: 2px solid black; background: rgb(255, 255, 255); color: rgb(0, 0, 0);">Test<img class="icon_delete" src="https://i.ibb.co/jTQckJm/icon-delete-2a.png" width="15" height="15">
        </div>
    </div>
</div>
</body>
user1098973
  • 334
  • 2
  • 9
  • It does not answer your question, but you may want to use pseudo-elements for this kind of "icons". Instead of having `` each time, you could use `.useritem::after` with background of your icon on it. – SeeoX Oct 12 '20 at 15:02
  • @SeeoX: thanks for the proposed suggestion. – user1098973 Oct 12 '20 at 15:06

2 Answers2

2

This happens because of overflow attribute. Set the overflow value to initial or scroll on .useritem and you will see the icon outside.

.useritem {
  position: relative;
  height: 15.625px;
  padding-left: 6.25px;
  padding-right: 6.25px;
  display: inline-block;
  text-align: center;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  background: #ff0000;
  /* Center slide text vertically */
  align-items: center;
  border: 1px solid #ff0000;
  border-radius: 10px;
  margin-bottom: 1px;
  margin-right: 3px;
  word-wrap: break-word;
  
  overflow: initial;
}

.icon_delete {
  position: absolute;
  bottom: 7.5px;
  right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.useritem:focus {
  background: #ffffff;
  color: #000000;       
  border-radius: 10px;
  border: 1px solid #000000;
}

[contenteditable] {
  outline: 0px solid transparent;
}
<body>
<div class="useritems">
    <div class="row">
        <div class="useritem" id="Location_Explore_UserItem_00" contenteditable="true" style="border: 2px solid black; background: rgb(255, 255, 255); color: rgb(0, 0, 0);">Test<img class="icon_delete" src="https://i.ibb.co/jTQckJm/icon-delete-2a.png" width="15" height="15">
        </div>
    </div>
</div>
</body>
Derek Wang
  • 10,098
  • 4
  • 18
  • 39
  • Thanks! Any chance you could help me out on the second part of my question as well? I'd like the icon to move dynamically when the `useritem` div becomes larger. – user1098973 Oct 12 '20 at 15:10
  • I have updated my answer. You can adjust it using `right` position on `.icon_delete`. There, in the past, you have put the icon using `left` position. And change it to `right` position and it will work. @user1098973 – Derek Wang Oct 12 '20 at 15:12
2

You have used "overflow" css that's why it's not showing. Remove overflow css you can see your icon position.

Ishita Ray
  • 672
  • 3
  • 8