Home > Article > Web Front-end > Set a fixed left position Div_html/css_WEB-ITnose close to the horizontally centered body content Div
Set a fixed left position Div_html/css_WEB-ITnose close to the horizontally centered body content Div
- WBOYOriginal
- 2016-06-24 12:06:42797browse
Example effect:
1. The divMain of the main content is horizontally centered;
2.divLeft is close to the divMain, the position is fixed, and does not move with the vertical scroll bar;
Related codes:
<html><head runat="server"> <title>设置靠近主体内容的左侧固定位置的Div</title><style>#divLeft{ position:fixed;/* 固定位置 */ top:200px; border:solid 1px #ccc; width:150px; height:500px;} #divMain{ width:918px; height:2000px; border:solid 1px #ccc; margin:0 auto;/* 水平居中 */}</style></head><body onresize="setDivLeftPosition();" ><div id="divMain"></div><div id="divLeft"> 左侧固定位置</div></body></html><script type="text/javascript"> //动态调整左侧Div的位置 function setDivLeftPosition() { var divMain = document.getElementById("divMain"); document.getElementById("divLeft").style.left = (divMain.offsetLeft - 155) + "px"; } setDivLeftPosition(); // var top, left; // if (div.currentStyle) { left = div.currentStyle.left; top = div.currentStyle.top; } // else if (window.getComputedStyle) { left = window.getComputedStyle(div, null).left; top = window.getComputedStyle(div, null).top; } // alert(left + "," + top);</script>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS2 writing order_html/css_WEB-ITnoseNext article：CSS2 writing order_html/css_WEB-ITnose