margin-left+position:relativeでsubmitボタンを2つ並べると一方が動作しなくなるケース

CakePHPのデフォルトCSS + $formヘルパーをベースに、position:relativeを用いてsubmitボタンを2つ横並べにしたら、一方(左側)が押せなくなる現象が発生しました*1。

原因は、submitを含むdivのCSSによるものでした。

CSSの設定によっては、CakePHPに限らず発生しうるかと思います。

2/24追記
ベースのCSSが私独自のもののため、CakePHPデフォルトのCSSをお使いの場合、レイアウトが微妙にずれる可能性があります。

現象

以下のコードで、通常投稿用のsubmitの下に、指定URLにGETで遷移するだけのCancelフォームを出力。
display:inlineとposition:relative, top/leftの指定で横に並べました。

edit.ctp

<div class="users form">
<?php echo $form->create('User');?>
(中略)
<?php echo $form->end('Submit');?>
</div>

<div class="backButton">
<?php
echo $form->create('', array('url' => array(
	'action' => 'view'),
	'type' => 'GET',
	'id' => 'CancelButton'
));
echo $form->end('Cancel');
?>
</div>

出力HTMLソース

<div class="users form">
<form id="UserEditForm" method="post" action="/users/edit/1">
(中略)
<div class="submit"><input type="submit" value="Submit" /></div></form></div>

<div class="backButton">
<form id="CancelButton" method="get" action="/users/view/1"><div class="submit"><input type="submit" value="Cancel" /></div></form></div>

関連CSS

(cake.generic.css由来)
form div.submit {
	border: 0;
	clear: both;
	margin-top: 10px;
	margin-left: 140px;
}

(独自)
.backButton {
	position: relative;
	top: -43px;
	left: 120px;
	display: inline;
}
.backButton form {
	display: inline;
}

すると、「Submit」ボタンがクリックに反応しなくなりました。

CSSのhover指定にも、反応しません。

調査

FireBugの要素調査機能を使って調べると、
Cancelボタンを囲むdiv.submit($form->end()で自動出力)の領域が、Submitボタンを覆っている(画像、黄色領域)事に気がつきました。

form div.submitに指定の、margin-left:140pxの領域です。

通常表示では見えませんが、このマージンがSubmitボタンの上に覆いかぶさっているので、押せない状態になっているようです。

実際に、z-indexをマイナスに設定してみる*2と、Submitボタンが反応するようになりました。
しかし、すると今度はCancelボタンが、Submitボタンとそれを囲むdivの下になって押せなくなります。

解決

原因が判ったので、CSSを調整しました。
div.submitをinlineにして、margin-leftを下げ、Cancelボタンをもう少し右にずらしてmargin領域とボタンが重ならないようにしました。

差分(CSSのみ)

diff --git a/app/webroot/css/base.css b/app/webroot/css/base.css
index 8889c84..8771088 100644
--- a/app/webroot/css/base.css
+++ b/app/webroot/css/base.css
@@ -356,7 +356,7 @@ form div.submit {
        border: 0;
        clear: both;
        margin-top: 10px;
-       margin-left: 140px;
+       margin-left: 35px;
 }
 label {
        display: block;
@@ -457,7 +457,8 @@ div.related {
 .backButton {
        position: relative;
        top: -43px;
-       left: 100px;
+       left: 120px;
+       display: inline;
 }

margin(黄色)の領域が、Submitボタンに被さらないようにしました。

ボタン全体の位置も左に寄りますが、個人的にもこのくらいが好みなので ^^;

*1:確認バージョンver. 1.2.5。ちらっと見たver1.3ではCSSかなり変っていたので、発生しないかも知れません。ver1.1以前は使ってないので不明

*2:FireBugの編集機能。便利