데이터가 포함 된 div (상대적으로 배치 된)가 있으며 상자 위에 일련의 단추가 있어야합니다. 이 버튼들은 절대 위치 지정을 사용하는 div입니다. 그러나 포함 된 div 외부에 배치하면 표시되지 않습니다. 포지셔닝이 양수이면 (메인 디비 내) 괜찮습니다. 절대 위치 지정된 div (또는 다른 요소, 나는 까다 롭지 않다)를 컨테이너의 경계 밖에서 보여줄 수 있습니까? 그렇다면 어떻게?요소가 포함 된 요소의 경계 외부에 표시되지 않습니다.
'버튼'중 CSS의 중요한 부분은 "위치 : 절대, 오른쪽 : -3px, 너비 : 20px, 위쪽 : -27px"입니다. (적절한시기 자바 스크립트가 켜져 공개/디스플레이)
주 사각형 다음 CSS 방식을 갖는다 :
echo " <div id='$portalid.ButtonDelete'
style='border:2px solid ".$onefield["Color.Border"]."; text-align: center; color: ".$onefield["Color.Text"]."; background: ".$onefield["Color.Fill"].";
position: absolute; right: ".$ButtonRight."px; width: 20px; top: -2px;
font-family: Sans-Serif; font-weight: bold;
height: 20px; padding-top: 2px;
z-index:1; cursor:pointer;' title='Delete selected ".$onefield["Display"]."' onclick='alert(\"Not implemented\");'>
X
</div>";
:
.ob{
visibility:hidden;
display:none;
position:relative;
left:1;
top:1;
text-align: left;
vertical-align: top;
padding-top: 12px;
margin-bottom: 20px;
padding-left:2px; padding-right:2px;
border-collapse: collapse;
overflow: auto;
}
예는 다음 PHP로 정의 로 번역
: t :
<div id='Delete'
style='border:2px solid red; text-align: center; color: White; background: Pink;
position: absolute; right: -2px; width: 20px; top: -24px;
font-family: Sans-Serif; font-weight: bold;
height: 20px; padding-top: 2px; z-index:1; cursor:pointer;'
title='Delete selected records' onclick='alert(\"Not implemented\");'>
X
</div>";
oveflow : 메인 div에 숨겨져 있습니다. 그냥 제거하십시오. –
두 가지 모두에 CSS를 게시 할 수 있습니까? 컨테이너 및 버튼? – jmore009
[jsfiddle] (http://jsfiddle.net/henc9uhs/)과 같이 top의 마이너스 값은 문제가되지 않습니다. 부모 div에'overflow : hidden'이 있다고 생각합니다. – wander