Html overflow position fixed

CSS position: fixed with horizontal scroll bar for overflowing content

I’m using CSS position: fixed for a div tag. My browser horizontal scroll bar is moving but I’m not seeing text. This is what I tried so far:

   .test < position: fixed; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, .2); overflow-x: auto; white-space: nowrap; width:2500px; >body  
test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data
   

6 Answers 6

You probably want overflowing text to create a scroll bar. You have to let the browser know, it shouldn’t break lines.

see my jsFiddle. I just added a background and padding so it’s better visible.

@user3194721 You said something about a vertical scrollbar in your initial question, I updated my answer.

Since you set your width to be 2500px, it is not showing in your browser view. So, I added a specified height and reduced the width to make it obvious that they are shown. Also set both (x and y) to scroll — you can fiddle with it as you see fit according to your needs.

well, initially you mentioned ‘vertical’ so that changes things 🙂 — in that case, add white-space: nowrap; to your .edit css

First of all, if you want to give vertical scroll with your div you need to specify height .

In my experience, sometimes you make position: fixed; for some div that have child div inside and this child div contains the content that will be scrolled. you should add display: flex; to the child div.

Without adding this style to this situation, it won’t work well.

You could try the follwing:

   .test < position: absolute; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, .2); white-space: nowrap; width:2500px; >body  
test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test datatest data test data test data test data test data test data test data test data test data test data test data test data test data test data test data
 
   

Источник

Как работает position: fixed;

Элемент с position: fixed; фиксируется в рамках области просмотра страницы, будь то в окне браузера или в iframe , расстояние до края которой указано в свойствах top , right , bottom , left . Передвинуть его относительно своего расположения можно с помощью margin и transform . Размещение элемента над другими элементами правится с помощью свойства z-index .

После того, как свойство position примет значение fixed , размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.

«Приклеить» элемент, чтобы он не менял своего положения при прокрутке страницы

Элемент с position: fixed; не влияет на размер родителя.

  
static 
 
fixed 

Элемент с position: fixed; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 static 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 fixed 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

В отличии от элемента с position: absolute; без родителя с position не static , элемент с position: fixed; не меняет своего положения при скроллинге.

  absolute fixed

При отсутствии свойств top , right , bottom , left элемент фиксируется на том месте окна браузера либо iframe , на котором находился до прокрутки. Его не увидеть, если он был ниже области, видимой без прокрутки.

  
fixed 
 
fixed 
 
 fixed 

Расположить элемент с position: fixed; относительно области просмотра окна браузера, iframe и т. п.

Свойства top , right , bottom , left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto .

  top right bottom left auto

Значения свойств height , top и bottom в процентах рассчитываются от высоты области просмотра. Свойство height в процентах не заменяется на height: auto; , даже когда ближайший родитель имеет height: auto; . Значения свойств width , margin , padding , left и right в процентах рассчитываются от ширины области просмотра.

Ширина и высота элемента с position: fixed; относительно области просмотра

Ширина элемента с position: fixed; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: fixed; ведут себя как элементы с display: block; и position: fixed; .

  
Блочный
 Строчный

Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).

  
Элемент

Стили, чтобы растянуть блок на всю ширину и высоту области просмотра окна браузера, iframe и т. п.:

left: 0; right: 0; top: 0; bottom: 0; /* или */ left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;

С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; (для того, чтобы передвинуть элемент в центр верхней правой 1/4 части родителя см., left: 50%; right: 0; top: 0; bottom: 50%; ). Если расстояние от left не auto до right не auto меньше width , то свойство right игнорируется (см., left: 50%; right: 50%; ).

  
Элемент

position: fixed; и overflow не visible

Выходящая за границы родителя с overflow отличным от visible часть элемента с position: fixed; не будет скрыта. Даже если она выйдет за рамки области просмотра, горизонтальная или вертикальная полоса прокрутки не появится.

  
Элемент 

position: fixed; и clip-path или clip

Свойство clip не рекомендуется использовать, так как оно устарело. Ему на смену пришло clip-path . Элемент с position: fixed; не выходит за рамки родителя с одним из них.

 /* серым выделено то, что нужно только для clip, так как он работает лишь совместно с position: absolute; */ body < height: 500vh; >.parent .absolute < position: absolute; width: 100%; box-sizing: border-box; height: 5em; border: 1px solid red; clip: rect(0, auto, auto, 0); /* весь периметр родителя */ clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0); /* весь периметр родителя */ > .fixed < /* одинаковое положение для обоих элементов */ position: fixed; top: 1em; left: 5%; > .fixed.red < background: red; >.fixed.lightpink 
Зафиксированный
 
 
Зафиксированный
 
 

position: fixed; не работает, когда у родителя свойства transform , perspective , filter или will-change имеют значение не none

Элемент с position: fixed; ведёт себя как элемент с position: absolute; относительно ближайшего родителя с transform , perspective , filter или will-change не none . Они создают новый контекст наложения. В браузерах разночтение.

нет нижеприведённых transform: translateX(0); filter: blur(0); perspective: 0; will-change: transform;

 body < height: 500vh; >div > span < position: fixed; right: 0; background: lightpink; > 
Элемент 

div по центру экрана

Вариант, который работает почти во всех версиях браузеров.

 #fixed < position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; text-align: center; background: rgba(0,0,0,.7); /* IE+9 */ > #fixed:before < /* IE+8 */ content: ""; display: inline-block; height: 100%; vertical-align: middle; > .fixed 
 
содержание
 

illyuziya Классно! А я всё думала, как «прилепляют» кнопочки и т.п. к краям экрана. Спасибо за «Шпаргалку. » — работа проделана колоссальная, а главное нужная. Анонимный Как сделать липкий слой чтобы находился рядом с основным блоком? NMitra Посмотрите, пожалуйста, возможные образцы.

Источник

HTML CSS Div Overflow & Position «fixed»

I’ve got an issue with styling using CSS. I have a website which constists of 4 major areas and 1 overall area. I simplified the code and added a color code to each area to get a quicker overview, but the main areas with there css looks like this:

.madegamesDiv < position: fixed; z-index: 1; top: 0px; left: 0px; width: 100%; min-width: 1200px; height: 34px; background-color: #778013; border-bottom: 1px solid #39950E; >.allDiv < position: fixed; top: 35px; left: 0px; width: 100%; height: 100%; min-width: 1200px; min-height: 850px; background-color: #39950E; overflow: scroll; >.leftDiv < position: absolute; z-index: 1; height: 775px; float: left; width: 200px; overflow: hidden; position: fixed; padding: 5px; background-color: #FFFF00; >.topDiv < min-width: 1000px; position: fixed; left: 200px; top: 35px; height: 150px; overflow: hidden; background-color: #FF00FF; >.mainDiv < width: 100%; min-width: 800px; max-width: calc(100% - 500px); background-color: #FFFFFF; position: fixed; left: 50%; margin-left: calc((100% - 500px)/2*(-1)); top: 160px; height: calc(100% - 180px - 27px); overflow: auto; border: 1px solid #225909; border-top-left-radius: 25px; border-top-right-radius: 25px; padding: 10px; background-color: #FF0000; >

  
 
Menu Area
 
 
 
Top Area with logo and other stuff
 
 
Main Area
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
Here is a lot of text and content
 
 
 
 

The main area main is the area with the most content. It needs to be scrollable. But my problem is now, how could I realize, when the browser window is too small, that all areas are displayed correctly? I thought on making the overall area all scrollable with CSS overflow:auto; or overflow:scroll; . But this does not work. I think the problem is, that the other areas are position:fixed and so the overall area all does not recognize the size of the other areas. Hard to explain, I hope, you can understand, what I try to explain. Is there a way to display scrollbars, when the window is too small? Thanks in advance for your help. If some code is missing or something is unclear, please feel free to ask.

Источник