CODEWITHSUNDEEP
htmlcss
Shahroz Asif
Shahroz Asif

Reputation: 143

Element overlapping when absolute positioning applied on a Custom Tag - HTML, CSS

I created a custom tag called <bubble></bubble> and its styles can be applied using the custom type attribute.

Code:

bubble[type=normal] {
  border-radius: 10px;
  background-color: #5e9bff;
  text-align: center;
  color: white;
  padding: 6px;
  width: 50px;
}
<bubble type="normal">Hello!</bubble>

The problem comes in positioning the element when placed with the div tags. First of all, the width: 50px; gets ignored unless I use Position: Absolute; which has another problem I'll describe below. Second, It partially overlays the text when <div></div> tags are used even after applying the margins on Top and Bottom.

Code with Absolute Positioning:

bubble[type=absoluteposition] {
  position: absolute;
  border-radius: 10px;
  background-color: #5e9bff;
  text-align: center;
  color: white;
  padding: 6px;
  width: 50px;
  margin-top: 10px;
  margin-bottom: 10px;
}
<bubble type="absoluteposition">Hello!</bubble>

The problem here is position: absolute; acts like float: left; which I don't want to use even after using margins on top and bottom. This problem also occurs with div tags.

Demo in JSFiddle.net

If you have a solution OR You think there is a problem in my code OR You think there is an Alternative way to fix this problem OR You need more details on my Question, please Reply.

Upvotes: 1

Views: 185

Answers (1)

Den Pat
Den Pat

Reputation: 1274

if you want to specify , height , width on above when using absolute than you may try wrap bubble tag in another div with relative position like :

<div class="some" style="
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
">
<bubble type="absoluteposition">Hello!</bubble>
</div>

Cheers !

Upvotes: 2

Related Questions