html – Position Relative & Absolute in Sections – Relative Sections Interfere with each other?-ThrowExceptions

Exception or error:

I tried to create a chat with a couple of messages. I used relative message wrappers containing an absolute-position picture section and an absolute-section message text. However, for some reason, each relative message wrapper cuts into a different one.

Does anyone know how to fix this?

Check the snippet below to reference.

.message-wrapper {
  margin-bottom: 10px;
  display: inline-block;
  position: relative;
}

.profile-image-section-left {
  margin-right: 10px;
  position: relative;
}

.message-content-left {
  background: black;
  max-width: 500px;
  padding: 9px;
  color: #fff;
  position: relative;
  left: 50px;
  top: -15px;
}

.profile-image {
  width: 40px;
  height: 40px;
  border-radius: 30px;
}

.profile-image-section-right {
  margin-left: 10px;
  position: absolute;
  right: 10px;
}

.message-content-right {
  background-color: black;
  padding: 9px;
  color: #fff;
  position: absolute;
  right: 70px;
  top: 20px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="message-wrapper">
    <span class="profile-image-section-left">
                <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
            </span>
    <div class="message-content-left">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper">
    <span class="profile-image-section-right">
                <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
            </span>
    <div class="message-content-right">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper">
    <span class="profile-image-section-left">
                <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
            </span>
    <div class="message-content-left">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
</div>
How to solve:

You could do this with a flexbox and some minor alterations to your right/left classes.

I attached a .left and .right class to your .content-wrappers to indicate position to help reduce the style rules and offer a cleaner approach. Hope this helps you out!

Example

.message-wrapper {
  margin-bottom: 10px;
  position: relative;
  display: flex;
}

.message-wrapper.left {
  flex-direction: row;
}

.message-wrapper.right {
  flex-direction: row-reverse;
}

.profile-image {
  width: 40px;
  height: 40px;
  border-radius: 30px;
}

.profile-image-section {
  margin: 0 10px;
}

.message-content {
  background: black;
  max-width: 500px;
  padding: 9px;
  color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card">
  <div class="message-wrapper left">
    <span class="profile-image-section">
        <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
    </span>
    <div class="message-content">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper right">
    <span class="profile-image-section">
        <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
    </span>
    <div class="message-content">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
  <div class="message-wrapper left">
    <span class="profile-image-section">
        <img class="profile-image" src="https://img.icons8.com/color/2x/ios-logo.png">
    </span>
    <div class="message-content">
      askjb sadkjbaskjb asdjbaskjbfas kadsjbkasjbf
    </div>
  </div>
</div>

Additional Resources

###

You should first get to know each position value in CSS:

  • Static: Not positioned
  • Relative: Positioned relative to its normal position
  • Absolute: Positioned relative to the nearest positioned ancestor
  • Fixed: Positioned relative to the browser window
  • Sticky: Changes between fixed and relative

Note that if you use a position of absolute, it must be inside a relative, fixed, or sticky element, so you should make sure about that.

Leave a Reply

Your email address will not be published. Required fields are marked *