绝对定位会影响overflow的效果和导航栏的制作详解（复制代码观看效果）

最新推荐文章于 2023-07-30 11:54:07 发布

_阿锋丶

最新推荐文章于 2023-07-30 11:54:07 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_43342105/article/details/102023300

版权

javascript 同时被 3 个专栏收录

50 篇文章 2 订阅

订阅专栏

html css

29 篇文章 18 订阅

订阅专栏

前端

28 篇文章 0 订阅

订阅专栏

overflow和绝对定位会使overflow的属性失效

        绝对定位会使其脱离文档流的  绝对定位的元素不总是被父级
        overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候
        
        解决方法
        1，overflow元素自身为包含块.
*      *2，overflow远古三的子元素为包含块  //下面用的这个
        3，任意合法突然transform申明当做包含块

下面是侧边栏的代码，包含解决这一问题的代码

<!DOCTYPE html <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>侧边栏
</title>
<style type="text/css">
    #div1 {
        width: 200px;
        height: 400px;
        background: #999999;
        /* overflow和绝对定位会使overflow的属性失效

        绝对定位会使其脱离文档流的  绝对定位的元素不总是被父级
        overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候
        
        解决方法
        1，overflow元素自身为包含块.
*      *2，overflow远古三的子元素为包含块  //下面用的这个
        3，任意合法突然transform申明当做包含块
        */
        position:absolute;
        /* position:relative; 
        如果这个侧边栏使用相对定位的话
        那么只要鼠标移到这个div上它就会一直不停的移动显然是不可的
        所以只能用绝对定位
        
        */
        left: -200px;
        top: 120px;
        border-radius: 0px 10px 10px 0px;
        color: #c23531;
        /* display: inline-block; */

        /* 滚动条*/
        /* overflow:auto; */
        /* overflow:scroll; */
        /* overflow: hidden; */
    }
   #div2
   {
    width: 200px;
    height: 400px;  
    overflow:auto;
   }

   #qiye1, #qiye2, #qiye3, #qiye4, #qiye5, #qiye6, #qiye7, #qiye8, #qiye9, #qiye10, #qiye11, #qiye12,#qiye13,#qiye14
   {
    border-top:1px solid rgb(153, 114, 30);
   }
   p{ line-height:10px} 
   #changsha
   {
    position:relative;
    left:500px;
   color:black;
   }
    span {
        width: 20px;
        height: 50px;
        line-height: 23px;
        /* 行高 */
        background: #999999;
        /* position:relative; */
        position: absolute;
        /* float: left; */
        left: 200px;
        top: 180px;
        border-radius: 0px 5px 5px 0px;
        border-top:1px solid rgb(153, 114, 30);
    }
</style>
<!-- 
<script>
    window.onload = function () {
        var odiv = document.getElementById('div1');
        odiv.onmouseover = function () {

            startmove(0, 10);//第一个参数为div  left属性的目标值  第二个为 每次移动多少像素

        }
        odiv.onmouseout = function () {
            startmove(-200, -10);
        }
    }

    var timer = null;
    function startmove(target, speed) {

        var odiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function () {
            // offsetLeft, 返回当前元素的相对水平偏移位置的偏移容器.
            if (odiv.offsetLeft == target) {
                clearInterval(timer);
            }
            else {
                odiv.style.left = odiv.offsetLeft + speed + 'px';
            }

        }, 20)
    }
//点击一个div另一个div产生反应
    var click_divs = document.getElementById("qiye1");
    var show_divs = document.getElementById("changsha");
    click_divs.onclick=function()
    {
        show_divs.style.display="block";
    }
</script> --> 
</head>

<body>
    <div id="div1">
        <!-- 加了div2使得overflow变得有效了 -->
        <div id="div2">
                <div id="qiye1"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye2"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye3"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye4"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye5"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye6"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye7"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye8"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye9"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye10"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye11"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye12"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
                <div id="qiye13"><p>企业名称：长沙</p><p> 企业位置：(112,28)</p></div>
        </div>
        <span>公司</span>
    </div>
    <div id="changsha">
        长沙
    </div>

</body>

</html>
<!-- <style type="text/css">
    #div1 {
        width: 200px;
        height: 400px;
        background: #999999;
        /* overflow和绝对定位会使overflow的属性失效

        绝对定位会使其脱离文档流的  绝对定位的元素不总是被父级
        overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候
        
        解决方法
        1，overflow元素自身为包含块.
*      *2，overflow远古三的子元素为包含块  //下面用的这个
        3，任意合法突然transform申明当做包含块
        */
        position:absolute;
        /* position:relative; 
        如果这个侧边栏使用相对定位的话
        那么只要鼠标移到这个div上它就会一直不停的移动显然是不可的
        所以只能用绝对定位
        
        */
        left: 0px;
        top: 120px;
        border-radius: 0px 10px 10px 0px;
        color: #c23531;
        /* display: inline-block; */

        /* 滚动条*/
        /* overflow:auto; */
        /* overflow:scroll; */
        /* overflow: hidden; */
    }
   #div2
   {
    width: 200px;
    height: 400px;  
    overflow:auto;
   }

   #changsha
   {
    position:relative;
    left:500px;
    /* display: none; */
   }
    span {
        width: 20px;
        height: 50px;
        line-height: 23px;
        /* 行高 */
        background: #999999;
        /* position:relative; */
        position: absolute;
        /* float: left; */
        left: 200px;
        top: 180px;
        border-radius: 0px 5px 5px 0px;
    }
</style> -->
<script>
    window.onload = function () {
        var odiv = document.getElementById('div1');
        odiv.onmouseover = function () {

            startmove(0, 10);//第一个参数为div  left属性的目标值  第二个为 每次移动多少像素

        }
        odiv.onmouseout = function () {
            startmove(-200, -10);
        }
    }

    var timer = null;
    function startmove(target, speed) {

        var odiv = document.getElementById('div1');
        clearInterval(timer);
        timer = setInterval(function () {
            // offsetLeft, 返回当前元素的相对水平偏移位置的偏移容器.
            if (odiv.offsetLeft == target) {
                clearInterval(timer);
            }
            else {
                odiv.style.left = odiv.offsetLeft + speed + 'px';
            }

        }, 20)
    }
//点击一个div另一个div产生反应
    var click_divs = document.getElementById("qiye1");
    var show_divs = document.getElementById("changsha");
    click_divs.onclick=function()
    {
        if(show_divs.style.color!="red")
        {
            show_divs.style.color="red";
            show_divs.style.fontWeight = "Bold";
        }
        else
        {
            show_divs.style.color="black"
            show_divs.style.fontWeight = "Normal";
        }
        
    }    
</script>