Question

我们在内容列的RHS上对齐了一个注册表单。内容很好地围绕着所需的表单。

问题是内容div似乎与表单div重叠，阻止用户与表单（Chrome和FF）交互。奇怪的是它似乎在IE中有效。

对于我们目前使用的表单：

float: right;

http://www.connecttherapy.com/our-services/

这看起来很棒，内容很好，但我们无法与表单进行交互。

尝试解决方案

减小内容div的宽度，但不会根据需要在表单下包装。
我们也测试了
```
position: relative;
top: 3px;
left: 485px;
z-index: 1;
```
http://www.connecttherapy.com/test/signup-form/

使用此解决方案，我们可以与表单进行交互，但它会将内容推送到表单高度以下。

还玩过
```
clear:right
clear:left
```

属性，但这似乎没有帮助。

我确信这些主板上的窥视将有一个非常简单，优雅的解决方案，目前正在躲避我们。提前谢谢！

Answer 1

#inner-signup-box-test {
    position: relative;
    z-index: 1;
}

试试这个，希望它有所帮助。

Answer 2

我在此runnable片段中重新创建了问题（请注意，输入无法与之交互）：

.content {
	position: relative;
}
.form {
	float: right;
	height: 100px;
	width: 200px;
	background: #CCC;
	margin: 0 0 0 20px;
}

<div class="form">
		<input type="text" />
	</div>
  <div class="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
	</div>

选项一

在div#goldp_post_81内移动注册表单，然后删除表单上边距。这将纠正z水平。这个顺序更有意义，因为div#goldp_post_81的内容围绕着表格父div。

HTML

<div class="goldp_content" id="goldp_post_81" style="position:relative;">
    <div id="inner-signup-box-test"></div>
</div>

CSS

#inner-signup-box-test {
    background: transparent url(images/signup-bg-compact.jpg) no-repeat scroll 0px 2px;
    float: right;
    height: 225px;
    width: 160px;
    margin: 0 0px 15px 15px; /* <-- no more top margin */
}

这是通过移动内部div来修复我的重新创建（输入现在对指针事件做出反应）：

.content {
	position: relative;
}
.form {
	float: right;
	height: 100px;
	width: 200px;
	background: #CCC;
	margin: 0 0 0 20px;
}

  <div class="content">
		<div class="form">
		<input type="text" />
	</div>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum mauris leo, vitae venenatis dolor euismod a. Quisque at tortor luctus, consequat elit non, ornare augue. Nulla consequat lectus a ante fermentum auctor. Ut augue libero, aliquam sit amet ex sed, auctor fermentum quam. Praesent dignissim cursus eros non iaculis. Integer aliquet sodales ipsum, vel ornare justo ullamcorper non. Maecenas aliquet orci quis diam tempus varius. Cras eu eros semper, malesuada libero in, ullamcorper lectus. Aenean ornare suscipit magna eu varius. Quisque lacinia sed est eget viverra. Morbi blandit justo non augue mollis sagittis.
	</div>

选项二

如果您无法移动HTML then the solution of Ghos does work，请确保它向右浮动，并且没有left，top，bottom或{ {1}}属性。

right

选项二示例：

#inner-signup-box-test {
    position: relative;
    z-index: 1;
    float: right;
}

.content {
	position: relative;
}
.form {
	position: relative;
	z-index: 1;
	float: right;
	height: 100px;
	width: 200px;
	background: #CCC;
	margin: 0 0 0 20px;
}

重叠的div阻止表单使用

2 个答案: