Home > Web Front-end > HTML Tutorial > 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

WBOY
Release: 2016-06-24 12:06:42
Original
841 people have browsed it

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>
Copy after login

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template