Блог

Главная - Вопросы по программированию - Проблемы с позиционированием и z-индексом

Проблемы с позиционированием и z-индексом

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я пытаюсь сделать так, чтобы содержимое меню перекрывало содержимое, но на данный момент оно перемещает поле содержимого.

Я уже пробовал этот position: relative трюк, но проблема, похоже, не исчезает. Решение, вероятно, является чем-то действительно очевидным, но мне нужна помощь в его поиске.

РЕДАКТИРОВАТЬ: Извините, забыл добавить, поле также будет изменяться по размеру (), поэтому я стараюсь избегать абсолютного позиционирования.
EDIT2: неважно, right:5px устраняет эту проблему

JSFiddle

HTML

 <div class="box">
    <div class="top">
        <div class="icon"></div>
        <div class="menubox">
            <ul class="menu">
                <li><a href="#">Menu Option 1</a>

                </li>
                <li><a href="#">Menu Option 2</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="content">
        <p>content goes here</p>
    </div>

    <div class="content">
        <p>content goes here</p>
    </div>
</div>

CSS

 .box {
    width: 400px;
    height: 200px;
    margin: 5px;
    float: left;
    background: LightGray;
    border: 1px solid DarkGray;
    overflow: hidden;
}
.top {
    width: 100%;
    height: 25px;
    background: lightblue;
}
.icon {
    float: right;
    background: red;
    height: 15px;
    width: 15px;
    margin: 5px;
}
.menubox {
    float: right;
    background: yellow;
    position: relative;
    z-index:100;
    width: 150px;
}
.content {
    width: 180px;
    height: 165px;
    margin: 0px 10px 47px;
    float: left;
    position: relative;
    z-index: 0;
    display: block;
    background:DarkGray;
}
li {
    list-style-type: none;
    text-decoration: none;
}
ul {
    margin:none;
    padding:none;
}

JS /jQuery

 $('.icon').mouseover(function () {
    $(".menu").show();
}); //toggle menu on hover
$(".menu").mouseleave(function () {
    $(this).hide();
});

Ответ №1:

использовать position: absolute ? скрипка

 .menubox {
    float: right;
    background: yellow;
    position: relative;
    z-index:100;
    width: 150px;
    top: 25px;
    right: 5px;
    position: absolute;
}
.box {
    width: 400px;
    height: 200px;
    margin: 5px;
    float: left;
    background: LightGray;
    border: 1px solid DarkGray;
    overflow: hidden;
    position: relative; /* add this */
}

Редактировать: лучшая позиция

Комментарии:

1. Извините, забыл добавить, поле также будет resizable() , поэтому я стараюсь избегать абсолютного позиционирования

2. если вы измените размер поля в скрипке , меню по-прежнему будет отображаться справа, так что все должно быть в порядке. Если вы приведете пример resizable() того, что это может помочь?

Ответ №2:

Желтый блок меню должен быть расположен абсолютно так, чтобы он не мешал потоку документа (занимал место).

Дайте ему position:absolute;

Кроме того, элемент .box должен иметь a position:relative , чтобы меню было расположено относительно этого окна.

Обновил вашу скрипку для вас:

http://jsfiddle.net/CcVnL/11/

Ответ №3:

Проверьте ссылку ниже, я обновил ваш код. «jsfiddle.net/CcVnL/9 /»