Объединение двух разделов с помощью float: справа

ProgramBox

Объединение двух разделов с помощью float: справа

Post author:admin
Запись опубликована:17 апреля, 2023
Post category:Вопросы по программированию

#css #css-float #overlap

#css #css-float #перекрытие

Вопрос:

Привет, я пытаюсь создать скользящее меню, используя DIV, но столкнулся с проблемой, которую я не могу понять, как преодолеть. Давайте взглянем на приведенный ниже код:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#menu").click(function () {
                $('#menuItem').slideDown('slow');
            });
        });
    </script>
</head> 
<body> 
    <div style="width: 500px; margin: 0px auto; padding: 10px;">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

Все, чего я хочу добиться, это сделать так, чтобы мое скользящее меню оставалось поверх моего элемента формы div. Пожалуйста, посоветуйте, как это можно сделать. Большое спасибо!

🙂

Ответ №1:

Быстрый и грязный: я добавил абсолютно расположенное внешнее содержимое для меню, а затем применил top:40px к содержимому div , чтобы сдвинуть его вниз, чтобы компенсировать высоту меню.

 <div style="position:absolute;width:100%;">
    <div style="width: 500px; margin: 0px auto; padding: 10px; ">
        <div id="menuItem" style="border: 1px solid blue; position: relative; z-index: 10; float: right;  display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>
        <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
            My Menu
        </div>
    </div>
</div>

    <div style="margin: 50px 0px; padding: 0px; text-align: center;  position:relative; top:40px; ">
        <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
            <div style=" clear:both;  z-index: 1; float: right;">Form Element</div>
        </div>
    </div>
</body>
</html>

Когда я набираю это, дотти уже ответил до меня с практически идентичным подходом. Однако в приведенном выше коде отдельные меню div правильно расположены рядом друг с другом, как вы этого хотите, как и в первом коде, который вы опубликовали в вопросе.

Вероятно, там есть некоторые div элементы и стиль, которые сейчас немного избыточны.

Редактировать: Теперь мне приходит в голову, что работа меню в коде дотти на самом деле, вероятно, такая, какой вы хотели видеть меню.

Ответ №2:

Поместите #MenuItem div внутри #menu div и установите для позиции #MenuItem div значение absolute и удалите его значение float.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>test</title> 

    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").click(function () {
            $('#menuItem').slideDown('slow');
        });
    });
</script>
</head> 
<body> 
<div style="width: 500px; margin: 0px auto; padding: 10px;">

    <div id="menu" style="border: 1px solid blue; position: relative; z-index: 10; float: right; cursor: pointer;">
        My Menu

        <div id="menuItem" style="border: 1px solid blue; position: absolute; z-index: 10; display: none; cursor: pointer;">
            MenuItem1<br />
            MenuItem2<br />
            MenuItem3<br />
            MenuItem4<br />
            MenuItem5<br />
            MenuItem6<br />
            MenuItem7
        </div>

    </div>
</div>

<div style="margin: 50px 0px; padding: 0px; text-align: center;">
    <div style="width: 500px; margin: 0px auto; border: 1px solid red; padding: 10px; height: 500px;">
        <div style=" position: relative; z-index: 1; float: right;">Form Element</div>
    </div>
    </div>
</body>
</html>