位置元素

Question

我有这个片段，我想在照片上找到像我一样的元素 灰色元素顶部的红色徽标，不使用负边距

＆＃13;

＆＃13;

.logo {
	width: 100px;
	height : 100px;
	position: relative;
	border-radius : 100px;
	margin: 0 auto;
	margin-top: 20px;
	background-color:red;
}
.chat {
	width: 100%;
	height: 500px;
	background-color: #4a4444;
	margin-top: 50px;
}

＆＃13;

	<section class="container">

			
		<div class="logo">
		</div> 

	 	<section class="chat">

		</section>
	</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

没有负边距

使用 position: relative; container 类

.container {
  position: relative;
}

position: absolute;top: 50px; chat 类

.chat {
      width: 100%;
      height: 500px;
      background-color: #4a4444;
      position: absolute;
      top: 50px;
    }

摘录示例

＆＃13;

＆＃13;

.container {
  position: relative;
}

.logo {
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 100px;
  margin: 0 auto;
  margin-top: 20px;
  background-color: red;
  z-index: 100;
}

.chat {
  width: 100%;
  height: 500px;
  background-color: #4a4444;
  position: absolute;
  top: 50px;
}

＆＃13;

<section class="container">


  <div class="logo">
  </div>

  <section class="chat">

  </section>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 2

＆＃13;

＆＃13;

.container {
  position: relative;
}

.logo {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  border-radius: 100px;
  margin: 0 auto;
  background-color: red;
}

.chat {
  width: 100%;
  height: 500px;
  background-color: #4a4444;
  margin-top: 50px;
}

＆＃13;

<section class="container">


  <div class="logo">
  </div>

  <section class="chat">

  </section>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 3

.logo {
   width: 100px;
   height : 100px;
   position: relative;
   border-radius : 100px;
   margin: 0 auto;
   margin-top: 20px;
   background-color:red;
   top: -50px;

}
.chat {
   width: 100%;
   height: 500px;
   background-color: #4a4444;
   margin-top: 50px;
}

<section class="container"> 

    <section class="chat">

      <div class="logo">
      </div>

    </section>
</section>

Answer 4

.logo {
	width: 100px;
	height : 100px;
	position: relative;
    left: 0%;
    top: 100px;
	border-radius : 100px;
	margin: 0 auto;
	margin-top: 20px;
	background-color:red;
        z-index: 1;
}
.chat {
	width: 100%;
	height: 500px;
	background-color: #4a4444;
	margin-top: 50px;
}

	<section class="container">

			
		<div class="logo">
		</div> 

	 	<section class="chat">

		</section>
	</section>