CSS 커버 기존 요소

Question

jQuery를 사용하여 기존 요소를 정확하게 오버레이하는 요소를 만듭니다. 적어도 의도입니다. 아이디어는 당신이 이러한 <input> 등의 요소를 가지고있다
A List Apart: Making Compact Forms More Accessible

, 특정 조건에서 당신은 (이 경우 <label>을에) 다른 요소를 표시합니다

컨텍스트는 여기에가는 것과 비슷합니다 절대적으로 힌트로서 그것의 꼭대기에 위치했다. 일반적인 원칙은 다른 시나리오에서도 유용하지만.

이런 종류의 작업을 수행하는 기존 라이브러리가 여러 개 있지만 모두 동일한 줄로 분해됩니다.

순진 방법 :

• 이 display:block 및 position:absolute으로 커버 요소를 만듭니다.
• 은 커버 요소

문제에 맞게 표지 요소의 left 및 top를 설정하지 : 커버의 위치는 더 이상 일치 할 때마다 같은 단락을 숨기거나 표시를 크기 조정 등의 페이지 레이아웃 변경됩니다.

약간 개선 방법 :

• 커버 요소를 추가 display:block 및 position:absolute
• 와 표지 요소를 작성 즉시 바닥을 설정 DOM
• 의 커버 요소 전 커버의 음의 높이와 너비에 대한 커버의 오른쪽 여백

이 방법은 유체 레이아웃의 문제를 해결하지만 커버 된 요소가 inline 블록 내에 있으면 표지가 나타나면 (블록 요소 삽입으로 인해) 줄 바꿈이 생기는 문제가 추가됩니다.

아마도 이것은 누군가 다른 사람이 이미 해결 한 문제입니다.

Answer 1

'순진한'접근 방식이 가장 좋지만 조금만 놓쳤습니다.

<div><i>Element to be covered</i> <span>Shiny new element</span></div> 

div의, i s와 span의 일 필요는 없습니다 것 그러나 이것은 단지 시각화를 위해, 그것은 중요 중첩의 - 난 단지 당신이 할 수 "범위"를 보여 그 코드에 i를 사용 스타일링을위한 원본 텍스트도 ..이 항상 관계에 나타납니다 "새로운"요소 (span)을 추가로 - 외부 용기 (원본 요소)에 position: relative;의 중요한 추가를 제외하고, 접근 # 1과 거의 동일

div {position: relative; width: 200px; height: 50px;} 
span {position: absolute; top: 0; left: 0; height: 100%; width: 100%;} 

여기에, 이는 해결해

문제점 : 상기 커버의 위치 아니오 이상 일치 할 때마다 이러한 단락을 숨기거나 표시 사이즈 변경 등의 페이지 레이아웃 변경 *

0.