使用CSS相对与绝对定位实现特定布局

我是CSS新手，想要实现将'title'置于灰色盒子左侧的布局。尝试使用Relative和Absolute定位后，要么段落内容会覆盖'title'，要么偏移'title'后在屏幕尺寸变化时会超出盒子范围，求解决方案。

核心思路是利用父元素相对定位+子元素绝对定位固定title位置，同时给父元素添加内边距避免内容覆盖，确保响应式场景下不会错位：

• 给灰色盒子（<p>）添加顶部内边距，留出title的空间
• 将title（<span>）设置为绝对定位，固定在盒子左上角
• 清理多余的定位属性，简化样式

修改后的完整代码 #

CSS代码 #

/********** Base styles **********/
* {
  box-sizing: border-box;
}
h1 {
  margin-bottom: 15px;
  text-align: center; /* 可选，让标题居中更美观 */
}

p {
  border: 1px solid black;
  background-color: gray;
  width: 90%;
  margin: 40px auto; /* 简化margin写法 */
  font-family: Helvetica;
  color: black;
  position: relative; /* 作为绝对定位的父容器 */
  padding-top: 30px; /* 留出title的空间，避免内容覆盖 */
  padding-left: 10px; /* 可选，给正文添加左侧内边距 */
  padding-right: 10px; /* 可选，给正文添加右侧内边距 */
}

/* Simple Responsive Framework. */
.row {
  width: 100%;
}

span{
  width: 100px;
  height: 25px;
  border: 2px solid black;
  background-color: red;
  position: absolute; /* 绝对定位 */
  top: 0; /* 贴紧盒子顶部 */
  left: 0; /* 贴紧盒子左侧 */
  display: block;
  text-align: center; /* 可选，让title文字居中 */
  line-height: 25px; /* 可选，垂直居中文字 */
}

/********** Large devices only **********/
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
  }
  .col-lg-1 { width: 8.33%; }
  .col-lg-2 { width: 16.66%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.33%; }
  .col-lg-5 { width: 41.66%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.33%; }
  .col-lg-8 { width: 66.66%; }
  .col-lg-9 { width: 74.99%; }
  .col-lg-10 { width: 83.33%; }
  .col-lg-11 { width: 91.66%; }
  .col-lg-12 { width: 100%; }
}

/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
  }
  .col-md-1 { width: 8.33%; }
  .col-md-2 { width: 16.66%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.33%; }
  .col-md-5 { width: 41.66%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.33%; }
  .col-md-8 { width: 66.66%; }
  .col-md-9 { width: 74.99%; }
  .col-md-10 { width: 83.33%; }
  .col-md-11 { width: 91.66%; }
  .col-md-12 { width: 100%; }
}

HTML代码 #

<h1>Responsive Layout</h1>

<div class="row">
  <section class="ele col-lg-4 col-md-6">
        <p class="par"> 
          <span>title</span>
          Chicken meal is rendered chicken meat that has been dried and ground up, and includes clean flesh, skin, and/or accompanying bone. But if you see a bag of dog food that proudly states it's made with “Real Chicken,” it's referring to a clean combination of chicken flesh and skin. 
    </p>
  </section>
  <section class="ele col-lg-4 col-md-6">
   <p class="par"> 
     <span>head 2</span>
     Item 2
   </p>
  </section>
  <section class="ele col-lg-4 col-md-12">
   <p class="hea"> 
     <span>head 3</span>
     Item 3
   </p>
  </section>
   
</div>

说明 #

• 绝对定位的span会相对于父元素p的左上角固定，不会随屏幕尺寸变化超出盒子
• p的padding-top确保正文内容不会和title重叠
• 额外添加的文字居中、内边距等样式是优化体验的可选项，可根据需求调整

内容的提问来源于stack exchange，提问作者Ray