html - 正确扩展 HTML 小部件

Question

HTML 和 CSS 布局对我来说仍然是一门黑色艺术，所以对于我正在努力完成的工作，我将不胜感激。

我正在为我们公司的“小部件”创建一个 JavaScript API，以便人们可以将它包含在他们的网站上。如果用户按下该小部件内的按钮，我想增加小部件的大小，比如从 300x200 到 600x400。到目前为止一切顺利，有一点 JS，我很高兴。但是有两个限制:

(1) 我想将大于 300x200 的任何内容“溢出”到页面上，即，我不只是增加主机的大小 <div>标记以便页面上的其他元素移开；我实际上想覆盖页面中的其他元素。

(2) 我想智能地执行此操作，以便如果小部件位于页面的左侧，它将向右展开；如果它在页面的右侧，它应该向左展开；如果它在顶部，它应该向底部扩展；如果它在底部，它应该向上扩展到顶部。

我认为位置/显示/ float CSS 属性的一些适当组合是我所需要的——但我还没有想出所需的精确组合。

提前致谢。

编辑 12/8/11 -

为了将来引用，我最终使用了 jquery UI position()重载帮助我定位。这是我最终使用的代码:

// Create a placeholder object and then hide the engage display element.
var host = engageObject.getHost();
var engageHost = engageObject.getEngageHost();
var parent = engageObject.getParentElement();
this.mPlaceholder = document.createElement('div');
$(this.mPlaceholder)
    .width($(engageHost).width())
    .height($(engageHost).height())
    .css('float', 'left');
parent.insertBefore(this.mPlaceholder, host);
$(engageHost).hide();

// Update the host's layout
this.mOriginalHostPositioning = $(host).css('position');
this.mOriginalHostWidth = $(host).width();
this.mOriginalHostHeight = $(host).height();
$(host).width($(this.mConnectHost).width());
$(host).height($(this.mConnectHost).height());
$(host).css('position', 'absolute');

// If we would otherwise spill out of the window on the right or the bottom,
// make sure we expand in the correct direction.
var topLeft = $(parent).offset();
var right = topLeft.left + $(this.mConnectHost).width();
var bottom = topLeft.top + $(this.mConnectHost).height();
var posStr;
if (right > $(window).width()) {
    posStr = "right ";
} else {
    posStr = "left ";
}
if (bottom > $(window).height()) {
    posStr += "bottom";
} else {
    posStr += "top";
}
$(host).position({ my: posStr, at: posStr, of: parent });

实际上，我创建了一个新的 placeholder与原始未展开小部件 ( engageHost ) 大小相同的图像，隐藏原始小部件，然后放置我的新 connectHost到原始父元素的适当 Angular 落。

Answer 1

我认为 CSS 的 Z-Index 属性正是您要寻找的。只需将整个 div 拉到更高的 Z-Index 就可以解决您的问题。或者，您可能希望保留小部件后面的空间。使用这样的空 div:

<!-- The following div takes up the space behind the floating applet.  In your case 300x200 or 600x400 ect -->
<div style="width:300; height:200; float:left;">&nbsp;</div>

<!-- The following div is where your widget goes (floating above the rest of the page) -->
<div style="position:absolute; left:0px; top:0px; z-index:2;"> 
    Your widget code here
</div>


<div style="clear:both">
    Other code on the website here.
</div>

相关 W3 学校: http://www.w3schools.com/cssref/pr_pos_z-index.asp