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

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

_阿锋丶

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

阅读量1k

点赞数

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

版权

javascript 同时被 3 个专栏收录

50 篇文章 2 订阅

订阅专栏

html css

29 篇文章 17 订阅

订阅专栏

前端

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>

_阿锋丶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
绝对定位会影响overflow的效果和导航栏的制作详解（复制代码观看效果）

overflow和绝对定位会使overflow的属性失效绝对定位会使其脱离文档流的绝对定位的元素不总是被父级 overflow属性裁剪，尤其当overflow在绝对定位元素及其包含块之间的时候解决方法 1，overflow元素自身为包含块.* *2，overflow远古三的子元素为包含块 //...
复制链接

扫一扫