[英]Vertically centered absolute position div inside relative position parent - Works in Chrome, but centers to body in Safari etc?
[英]calculate centered absolute div inside relative
我正在使用2個Javscript方法將懸停按鈕放在頁面上的靜態元素中。 中心的按鈕在第一個元素內輸入並使用絕對位置。 我用來獲取父元素測量的代碼:
// calculate if the element is in the visible window
function elementVisibleRect(element) {
element = $(element);
var rect = {
top: Math.round(element.offset().top),
left: Math.round(element.offset().left),
width: Math.round(element.outerWidth()),
height: Math.round(element.outerHeight())
};
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var scrollBottom = scrollTop + windowHeight;
var elementBottom = Math.round(rect.height + rect.top);
if (scrollTop < rect.top && scrollBottom > elementBottom) {
return rect;
}
if (scrollTop > rect.top) {
rect.top = scrollTop;
}
if (scrollBottom < elementBottom) {
rect.height = scrollBottom - rect.top;
} else {
rect.height = windowHeight - (scrollBottom - elementBottom);
}
return rect;
}
並使用此信息並使按鈕居中
// center the element based on visible screen-frame
function elementPosition (element) {
var visibleRect = elementVisibleRect(element);
$('.editHoverButton').css({
top: visibleRect.top + ((visibleRect.height / 2) - ($('.editHoverButton').outerHeight() / 2)),
left: visibleRect.left + (visibleRect.width / 2) - ($('.editHoverButton').outerWidth() / 2)
});
}
現在我的問題是第三方庫需要父DIV將位置從瀏覽器默認“靜態”更改為“相對”,這會破壞我在第二個函數中的計算。
可能會遲到,但無論我嘗試什么,我似乎都無法弄清楚當父元素的位置設置為相對時如何使其工作。 我似乎無法將數學弄得恰到好處,而且我的頭腦開始受傷了。 有什么建議?
編輯 - 添加JSFIDDLE
具有absolute
定位的元素從自然流中移除(例如,它們不會留下它們所在的空間) 並且相對於它們的第一父元件以非static
定位定位 。 由於右側盒子的位置是relative
(非static
),您可以將按鈕置於top: 50%;
left: 50%;
。 這將使左上角位於父級的中心。 然后你所要做的就是使用margin-top
和margin-left
從位置減去元素高度和寬度的一半。 這比你正在做的要簡單得多,如下所示:
JavaScript的:
function elementPosition() {
$('.editHoverButton').css('margin-top', 0 - $('.editHoverButton').outerHeight() / 2);
$('.editHoverButton').css('margin-left', 0 - $('.editHoverButton').outerWidth() / 2);
};
CSS:
.editHoverButton {
position: absolute;
z-index: 99;
font-family: sans-serif;
font-size: 14px;
font-weight: normal;
background-color: #00bb00;
top: 50%;
left: 50%;
}
除了從elementPosition()
函數中刪除this
之外,沒有其他任何東西需要改變。
DEMO (注意左邊的一個不再有效。這是因為它定位為static
。)
編輯 - 使用相同的基本思想,這種方法應該工作:
問題是在定義rect
時你已經占據了元素的頂部和左側位置。 關於定位計算。 將它們更改為0
(不是最好的方法,但它有效)可以解決relative
元素的問題。
DEMO (注意左邊的一個現在可以工作。這是因為無論如何它都位於0,0。)
編輯 - 這將在頁面滾動時起作用:
這會將容器設置為變量,以便在頁面滾動時可以自動重新定位。
編輯:通過僅更改腳本使其與您的CSS和HTML(相對和絕對定位)一起工作。
水平軸計算完全缺失(我已經應用了您應用於垂直軸的相同計算)。
我已經添加了一些數據和一個標尺來幫助你完成這項工作:正如你所看到的那樣(它原來是在你原來的小提琴中)沒有完全居中(顯然你需要在容器小於時才看它)視口),但這很容易解決。
嘗試調整小提琴窗口的大小並垂直和水平滾動以查看它的工作原理。
function elementVisibleRect(element) {
$("#data").html("");
element = $(element);
var rect = {
top: Math.round(element.offset().top),
left: Math.round(element.offset().left),
width: Math.round(element.outerWidth()),
height: Math.round(element.outerHeight())
};
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var scrollBottom = scrollTop + windowHeight;
var elementBottom = Math.round(rect.height + rect.top);
var scrollLeft = $(window).scrollLeft();
var windowWidth = $(window).width();
var scrollRight = scrollLeft + windowWidth;
var elementRight = Math.round(rect.width + rect.left);
addData("rect.top", rect.top);
addData("rect.left", rect.left);
addData("rect.width", rect.width);
addData("rect.height", rect.height);
addData("scrollTop", scrollTop);
addData("windowHeight", windowHeight);
addData("scrollBottom", scrollBottom);
addData("elementBottom", elementBottom);
addData("scrollLeft", scrollLeft);
addData("windowWidth", windowWidth);
addData("scrollRight", scrollRight);
addData("elementRight", elementRight);
if (rect.top < scrollTop) {
rect.top = scrollTop;
}
if (scrollBottom < rect.top < scrollTop) {
rect.top = scrollTop;
}
if (scrollBottom < elementBottom) {
rect.height = scrollBottom - rect.top;
} else {
rect.height = windowHeight - (scrollBottom - elementBottom);
}
if (rect.left < scrollLeft) {
rect.left = scrollLeft;
}
if (scrollRight < rect.left < scrollLeft) {
rect.left = scrollLeft;
}
if (scrollRight < elementRight) {
rect.width = scrollRight - rect.left;
} else {
rect.width = windowWidth - (scrollRight - elementRight);
}
return rect;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.