Question

我正在尝试创建项目协作以列出。如果我点击＆＃34;分配任务＆＃34;按钮一个弹出div应包含一个日期选择器和一个应该分配任务的下拉列表。但是现在我只是放了一些lorem impsum文本。

我遇到的问题是当弹出div显示所有li元素被推下时

我尝试将弹出窗口设置为绝对值，但它一直到页面顶部。我尝试将ul设置为绝对值，但它会在一行中折叠

是否有任何人可以提供任何想法，让我切换assign_task div而不是按下ul元素？

以下是我的jsfiddle的链接。任何帮助将非常感激。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <script src="../assets/js/jquery.js"></script>


    <style>

        body{
           margin-top : 300px
        }

        .assign_task,.datepicker{
            display: inline-block;
            width: 212px;
            position: relative;
            z-index: 10;
            background-color: white;


        }

        .assign_task{
            top :220px
        }






    </style>
</head>
<body>



<ul>

    <li>Finish Wireframe Design <button>Assign Task</button>

    <div class="assign_task">

        <div class="datepicker"> Due Date and user task assignment goes here


            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem eligendi eos fuga in ipsum libero sit totam veritatis? Ab adipisci architecto debitis doloremque fuga id molestiae provident saepe unde vel.lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi cumque et libero nostrum porro, quae sunt! Aspernatur deleniti fugit, magni

        </div>



    </div>
    </li>

</ul>


<ul>

    <li>Make sure that the contact page, and the landing page gets revised tomorrow <button>Assign Task</button>

        <div class="assign_task">

            <span class="datepicker"> Due Date and user task assignment goes here</span>

        </div>

    </li>

</ul>

<script>

    $(".assign_task").hide();

    $("button").click(function () {

        var task_assignment_div = $(this).next();

        task_assignment_div.toggle();

    });


</script>


</body>
</html>

Answer 1

To＆＃34; jail＆＃34;或＆＃34;包含＆＃34;一个位置：绝对，你需要一个父元素，即position：relative | absolute | fixed（基本上没有任何默认值）。

所以在你的情况下你需要：

.assign_task{
  top :220px
  position:relative;
}

如果你想让孩子保持绝对的位置。干杯！

Answer 2

确实需要将父元素包装在position：relative中以包含绝对定位的元素。但是关于显示弹出窗口时移动的问题，我建议不要切换（），切换css类名称，为原始弹出窗口分配默认的可见性样式：隐藏，并让切换的css类覆盖该样式可见性：可见：

.assign_task {
visibility: hidden;
}
.assign_task.active { /* toggle class active */
visibility: visible;
}

如何在不下推其他元素的情况下切换元素

2 个答案: