html fixed div, наложенный другим div

Я проектирую сайт, внутри которого я хочу иметь toolbar наверху, независимо от того, как действует свиток, div toolbar всегда будет наверху. Это то, что я до сих пор:html fixed div, наложенный другим div

http://jsfiddle.net/RjHMH/85/

<div class="stuckpart"> 
    <button type="button">this button is fixed</button> 
</div> 
<div id="table_div"></div>

Я использую google table библиотеку JS прикрепить таблицу в table_div, но когда я прокручиваю вниз таблицы, button в верхней перекрывается стол. Как это исправить?

Чтобы быть более конкретным: то, что я хочу, так это то, что сделали w3school, у них есть панель инструментов всегда наверху.

Как бы реализовать что-то подобное? Небольшая демонстрация в jsfiddle была бы крутой.

источник

2015-11-06 byteBiter

'позиция: фиксированная;' это ключ – holden

Вы не нарисовали очень четкую картину. Взгляните на эту скрипку и сообщите мне, если это то, что вы ищете? http://jsfiddle.net/AKL35/958/ – Jase

не запрашивать код на jsfiddle - код должен быть в ответе - ваш код также должен быть в вопросе ... – Soren

.stuckpart{ 
     position:fixed; 
     padding-bottom: 200px; 
     z-index:100 
    }

г-индекс будет решить проблему перекрытия.

источник

2015-11-06 21:21:56

хотя ты сосать ... – byteBiter

Это переместит вашу навигационную панель в начало страницы и сохранит ее при прокрутке страницы.

<body> 
    <div id='nav_bar'> 
    </div> 
</body> 


#nav_bar { 
    position: fixed; 
    top: 0px; 
    //the rest of your nav bar style 
}

источник

2015-11-06 20:15:57

HTML:

<div class="menu"></div>

CSS:

.menu { 
    background-color: #000000; 
    width: 500px; 
    height: 50px; 
    position: fixed; 
    margin-top: 0px; 
}

fixed Позиция важна.

источник

2015-11-06 20:18:39 wall3r

И крайний край для фиксированного элемента не имеет значения ... – CroaToa

#nav_bar { 
    position: fixed; 
    background-color:blue; 
    height:50px; 
    width:100% 
    } 
#content { 
    background-color:lightgreen; 
    overflow-y:auto; 
    height:200px; 
    position:relative; 
    width:100%; 
    top:50px; 
}

http://jsfiddle.net/oa7mfcmb/6/

источник

2015-11-06 20:23:21 holden

он выглядит хорошо, но, пожалуйста, обратитесь к это http://jsfiddle.net/RjHMH/85/, как вы можете это исправить? – byteBiter

выглядит хорошо, вы можете повысить свой вопрос? – byteBiter

html fixed div, наложенный другим div

ответ

Смежные вопросы