Fixed div inside a scrollable div - CSS only

Question

I'm trying to make a div stay at a fixed location inside another div. The containing div is scrollable and his location is not fixed in the screen.

This is what I got so far JSFiddle

The text "fixed text" should stay at the top right corner of the container when scrolling. I made 2 copies of the div and kept the same class in order to simulate 2 different locations of the div.

Can it be done with CSS only?

HTML

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

CSS

.cont{
  width: 400px;
  height: 130px;
  border: 1px solid black;
  margin: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.items{
  width: 600px;
}

.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}

.txt{
  position: absolute;
  top: 2px;
  right: 10px;
}

Nenad Vracar · Accepted Answer · 2017-01-12 17:56:23Z

2

You can use overflow: auto on items instead of cont element.

.cont {
  width: 400px;
  height: 130px;
  border: 1px solid black;
  margin: 10px;
  overflow-x: hidden;
  position: relative;
}
.items {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.item {
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}
.txt {
  position: absolute;
  top: 2px;
  right: 10px;
}

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

answered Jan 12, 2017 at 17:56

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Itay Gal Over a year ago

Nice solution. This is just a simplified example of my problem. I'll have to check if it doesn't affect other elements.

kukkuz · Accepted Answer · 2017-01-12 17:55:23Z

1

Create an extra wrapper and apply height and overflow to that - I have added a div inner wrapping all the contents of cont and applied this to it:

.inner {
  overflow-x: scroll;
  overflow-y: hidden;
  height: inherit;
}

See demo below to see what I mean:

.cont {
  width: 400px;
  height: 130px;
  border: 1px solid black;
  margin: 10px;
  /*overflow-x: auto;*/
  /*overflow-y: hidden;*/
  position: relative;
}
.items {
  width: 600px;
}
.item {
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}
.txt {
  position: absolute;
  top: 2px;
  right: 10px;
}
.inner {
  overflow-x: scroll;
  overflow-y: hidden;
  height: inherit;
}

<div class="cont">
  <div class="inner">
    <div class="items">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <div class="txt">
      fixed text
    </div>
  </div>
</div>

answered Jan 12, 2017 at 17:55

kukkuz

42.5k6 gold badges65 silver badges103 bronze badges

1 Comment

Itay Gal Over a year ago

As I commented to Nenad, this is just a simplified example of my problem. I'll have to check if it doesn't affect other elements

Michael Coker · Accepted Answer · 2017-01-12 17:55:12Z

Add the fixed height and overflow to .items instead, so that .items scrolls instead of .cont, and .txt will stay where it is since it is positioned relative to .cont and .cont isn't scrolling.

.cont{
  width: 400px;
  border: 1px solid black;
  margin: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.items{
  width: 600px;
  height: 130px;
  overflow: scroll;
}

.item{
  width: 80px;
  height: 80px;
  background-color: blue;
  margin-top: 22px;
  margin-left: 3px;
  display: inline-block;
}

.txt{
  position: absolute;
  top: 2px;
  right: 10px;
}

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

<div class="cont">
  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="txt">
    fixed text
  </div>
</div>

Collectives™ on Stack Overflow

Fixed div inside a scrollable div - CSS only

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related