CSS - 在边框左侧添加具有相对位置的图标

Question

我有以下代码笔:

https://codepen.io/anon/pen/RBdWOa

我需要的是在最左边位置的边框顶部显示一个图标16x16，如下图所示(红色圆圈应该是图标)。

我有一个用于以下 HTML 元素的 LeftIcon 类。

<i class="fa fa-search LeftIcon"></i>


.LeftIcon {
   position: relative;
   bottom: 0;
   right: 0px;
   width: 20px;
   height: 19px;
   border: 1px solid #FFF;
   border-radius: 50%;
   background: red;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
   color: #FFFFFF;
}

但是如果你看到它没有在我需要的地方对齐。

Any clue?

Answer 1

如果要将一个元素放置在另一个元素之上，请在父元素上设置相对位置，在子元素上设置绝对位置。然后使用顶部和左侧将元素放置在您想要的位置。在您的情况下，您正在显示彼此相对的元素。

以下是实现您所要求的方法。

1. 在 .DialogBox__message-content 上设置“position:relative”。
2. 然后将图标放置在上面的 div 中。
3. 在 .LeftIcon 类上设置以下样式。

position: absolute;    //places the icon in absolute position to message-content*  
top: calc(50% - 10px); // sets the top at 50% - half of the height (19px)*
left: -12px;           // places the element on top of the line*

html body {
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
}

div {
  display: block;
}

.DialogBox {
  text-align: right;
}

.DialogBox__message {
  margin-bottom: 20px;
  -webkit-transition: .35s ease;
  transition: .35s ease;
  text-align: right;
}

.DialogBox__messages-wrapper {
  padding: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  min-height: 100%;
  background-color: #f2f2f2;
  border-style: solid;
}

.DialogBox__message-content {
  background-color: #ffffff;
  color: #525860;
  padding: 15px 35px;
  max-width: 400px;
  display: inline-block;
  margin-bottom: -20px;
  margin-right: 20px;
  margin-left: 0;
  border-radius: 20px;
  text-align: left;
  word-wrap: break-word;
  border-style: dashed;
  position: relative;
}

.LeftIcon {
  position: absolute;
  top: calc(50% - 10px);
  left: -12px;
  width: 20px;
  height: 19px;
  border: 1px solid #FFF;
  border-radius: 50%;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #FFFFFF;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<div class="DialogBox__message">
  <div class="DialogBox__message-content-wrapper">
    <div class="DialogBox__message-content">
      This is a first message.
      <i class="fa fa-search LeftIcon"></i>
    </div>

  </div>
</div>

<div class="DialogBox__message">
  <div class="DialogBox__message-content-wrapper">
    <div class="DialogBox__message-content">This is a second message.</div>
  </div>
</div>

<div class="DialogBox__message">
  <div class="DialogBox__message-content-wrapper">
    <div class="DialogBox__message-content">This is a third message.</div>
  </div>
</div>

<div class="DialogBox__message">
  <div class="DialogBox__message-content-wrapper">
    <div class="DialogBox__message-content">
      This is a final message bye bye.
      <i class="fa fa-search LeftIcon"></i>

    </div>
  </div>
</div>