ASP控件渲染的Textarea遇长Label重叠，求CSS调整方案

Hey there! Let's tackle that frustrating overlap between your long label and textarea. The root of the problem is how your absolute-positioned label interacts with the document flow—absolute positioning takes elements out of the normal flow, so even if your label wraps onto multiple lines, it won't push the textarea down.

Here's a revised CSS solution that keeps your floating label effect intact while ensuring the textarea automatically shifts down when the label is long:

Updated CSS #

*, *:before, *:after { box-sizing: border-box; }
#formQuestions { width: 500px; margin: 2em auto; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; font-size: 25px; }
.float-label .control { float: left; position: relative; width: 100%; border-bottom: 1px solid #ddd; padding-bottom: 10px; /* Removed padding-top since label now lives in the document flow */ }
.float-label .control.small { width: 30%; border-right: 1px solid #ddd; }
.float-label .control.medium { width: 70%; padding-left: 10px; }
.float-label .control:last-child { border: 0; }
.float-label input, .float-label textarea { display: block; width: 100%; border: 0; outline: 0; overflow-y: hidden; border: none; border-left: 1px solid rgb(204, 204, 204); border-right: 1px solid rgb(204, 204, 204); border-bottom: 1px solid rgb(204, 204, 204); overflow: auto; }

/* Modified label styles to keep them in the document flow */
.float-label input+label, .float-label textarea+label { 
  position: relative; 
  display: block;
  margin-bottom: 8px;
  opacity: 0; 
  font-size: 18px; 
  font-weight: 600; 
  color: #ccc;
  transform: translateY(20px); /* Mimics original top positioning */
  transition: transform 0.7s ease, opacity 0.7s ease, font-size 0.7s ease, color 0.7s ease;
}

/* Adjusted active/focus styles for the floating effect */
.float-label input:valid+label, .float-label textarea:valid+label { 
  opacity: 1; 
  font-size: 14px; /* Shrink label when input has content */
  transform: translateY(0); /* Move label to top of control */
}
.float-label input:focus+label, .float-label textarea:focus+label { 
  color: #2c8efe; 
  opacity: 1; 
  font-size: 14px;
  transform: translateY(0);
}

What Changed? #

• Label positioning: Switched from position: absolute to position: relative so the label stays in the document flow. This means when the label wraps onto multiple lines, it will expand the height of the .control container, pushing the textarea down automatically.
• Floating effect: Replaced the top transition with transform: translateY() to achieve the same "float up" animation when the textarea has content or is focused.
• Removed unnecessary padding: Took out padding-top: 23px from .control since the label now occupies that space in the flow.

How to Test #

Just replace your existing CSS with this updated version—your long labels will wrap naturally, the textarea will adjust its position to avoid overlap, and you'll keep that clean floating label interaction you had before.

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