position:absolute,绝对定位和相对定位,JQ隐藏和显示

需要在指定位置,用绝对定位。

如果直接写position:absolute,top:0;left:0,那就是以浏览器的左上角为参照了

现在需要在某一个指定位置用绝对定位

解决方法

在需要用绝对定位(position:absolute)的层之外,加一个相对定位的层(position:relative),作为参照

需要注意的是,必须以最近并且有(position:relative)的层作为参照,只能是父级,不能是爷爷级

     <span class="nav_one"><a href="#" class="btn-weibo pngFix "> </a>
            <span class="nav_two">
                <img src="/images/weibo.jpg" />
            </span>
        </span>
<style>
 .nav_one{position:relative;float:left;}
.nav_one span.nav_two{  display:none; position:absolute;z-index:1000;top:30px;left:-20px} 
</style>
<script type="text/javascript">
        $(function () {
            $(".nav_one").hover(function () {
               
                $(this).children(".nav_two").slideDown(200);
            }, function () {
                $(this).children(".nav_two").slideUp(50);
                 
            });
        });
</script>   

效果如下

原文地址:https://www.cnblogs.com/qigege/p/4843665.html