CSS : 텍스트 위에 올리기

콘텐츠 (텍스트) 위에 마크하면 삭제 아이콘이 나타나게하고 싶습니다. 이제이 작업을 수행했지만 텍스트가 보이면 추악한 방식으로 텍스트를 이동합니다. 나는 그것을 "위에 표시"할 수있는 방법 http://jsfiddle.net/AB4Ls/10/CSS : 텍스트 위에 올리기

를, 그래서 텍스트에 영향을 해달라고하지만 여전히 오히려 플로트보다, 당신은 "절대적으로"닫기 버튼을 배치 할 필요가

출처

2010-12-17 Karem

BTW를 사용하면 '.aL_Content : hover .delButton' CSS 선택기를 사용하여 버튼을 표시하는 경우 자바 스크립트를 전혀 사용할 수 없습니다. –

CSS 의사 호버를 사용하는 것은 물론 지원해야하는 브라우저에 달려 있습니다. IE6에서는 작동하지 않습니다. http://www.quirksmode.org/css/contents.html#t16 – ajcw

나타납니다

여기를 참조하십시오 콘텐츠에서.

.aL_Content{ 
    position: relative 
} 

.delButton{ 
position: absolute; 
    right: 0; 
    top: 0; 
}

을 그리고 .delButton에서 float:right을 삭제 :

간단한 당신의 CSS에이를 추가 할 수 있습니다.

출처

2010-12-17 15:01:44 ajcw

그리고 텍스트 위에 이미지가 나타나지 않게하려면 .aL_Content div에 올바른 패딩을 추가하기 만하면됩니다. – ajcw

'z-index'도 필요합니까? – lony

Z- 색인이 필요하지 않습니다. – ajcw

가장 낮은 블록에서 예제에서 마크 업을 변경했습니다.

나는 사업부에 입력을 변경하고 .delbutton에 .aL_Content 및 position: absolute;에 다음 position: relative;, 원래 사업부에서 분리했다.

플로트 속성을 제거하는 것이 텍스트가 새 요소 주위를 감싸는 원인이었습니다.

내 변경 사항 here at jsFiddle을 볼 수 있습니다.

출처

2010-12-17 15:05:19 Kyle

CSS : 텍스트 위에 올리기

답변

관련 문제