Закрепить верхнюю часть страницы

Question

контексте, моя страница разделена следующим образом:

• Левая сторона (Col-хз-8)
  • верхняя часть (класс: request-top)
  • нижняя часть
• правой части (COL-XS-4)

Как верхняя часть левой стороны, так и правая сторона должны быть зафиксированы. Нижняя часть левой стороны должна свободно прокручиваться. Я исправил правую руку легко, но у меня проблемы с фиксацией верхней части левой стороны.

Что происходит, если я добавлю position:fixed;z-index:1000; в верхнюю часть левой стороны, он исправляет, но затем col-xs-8 получает переопределенный и верхняя часть покрывает правую сторону. Как я могу исправить, но сохранить настройку col-xs-8? (Сокр рубить, где я дать ему возможность расширить на всю ширину, а затем вставлять другой col-xs-8, а затем только что с правой стороны еще выше г-индекс)

Рабочая постановка версии: https://hidden-tundra-8656.herokuapp.com/request

Answer 1

Он будет принимать шаг за шагом осмотр ..

Я просто внести некоторые изменения ,, Просто попробуйте, и после этого решить следующую проблему ..

.request-top { 
background-color: #D8D8D8; 
padding-top: 3%; 
padding-bottom: 3%; 
position: fixed; 
z-index: 1000; 
} 
.request-bottom { 
background-color: white; 
padding-bottom: 3%; 
position: relative; 
} 
.cart-section { 
background-color: gray; 
/* height: 100%; */ 
padding-top: 3%; 
padding-bottom: 3%; 
border-left: 7px ridge #939393; 
right: 0; 
} 
.request-top { 
background-color: #D8D8D8; 
padding-top: 3%; 
padding-bottom: 3%; 
position: fixed; 
z-index: 1000; 
width: 85%; 
} 

Привет ..

Это веб-страница, сделанная мной. Разместите веб-страницу таким образом. Существует заголовок секции кузова, а для заголовка - 5-6 разделов. Вы увидите разницу в ширине между секцией кузова и секцией заголовка. Ширина секции заголовка максимальная, а ширина секции тела ограничена, а div выравнивается по центру.

Внутри тела я использую один другой DIV, который я отметил в этой картине, и я также поставил отдельный эффект прокрутки divs.So они могут индивидуально перемещаться apart.The кода, я использовал здесь, чтобы установить

max-width: 292px; //choose your dimension 
    overflow: scroll; 

Я думаю, что лучше использовать Chrome-браузер. У него есть функция, которая очень полезна для веб-разработчиков.

Прежде всего

Откройте веб-страницу в хроме.

Щелкните правой кнопкой мыши (часть, которую вы хотите внести изменения) и выберите «Осмотреть элемент» [Ctrl + Shift + i] в платформе Windows.

Тогда и можно увидеть, как это ..

1 Я упомянул здесь код раздела и 2 является CSS раздел.

Выбранная деталь highligted в главном экране (левой стороны, в моем случае)

Затем внести необходимые изменения в раздел CSS, который подходит вашей веб-странице, и вы можете увидеть изменения в реальное время.

[!! Обратите внимание, что это только для проверки и просмотра, поэтому, если вы внесете необходимые изменения, скопируйте отредактированный код и вставьте его в исходный код, также создайте резервную копию исходного кода, прежде чем вносить какие-либо изменения.]

Please голосуйте, если это вам полезно.

Regds ..