CODEWITHSUNDEEP
cssoverflowcss-position
RusBes
RusBes

Reputation: 55

CSS. Position and overflow

I have created a simple demo of my problem.

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: -20px;
  background: yellow;
}
.set-overflow:hover .element{
  bottom: 0;
}
<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

I have two parents and element, which should appear on parent's hover. The problem is that I have to get rid of scroll without changing parents' properties.

Please note that it is just a simple example, so I have to solve this with minimum possible effect on the other elements. Thanks!

JSFiddle: https://jsfiddle.net/o0abLxek/15/

Upvotes: 0

Views: 166

Answers (2)

Matthias Schmidt
Matthias Schmidt

Reputation: 616

Edited answer: Learning that you want to use a transition on the element (I'm guessing you want to make it slide up), I've updated my answer. height won't help you as you can't use transition on height, but you could use max-height instead, as pointed out in this question (How can I transition height: 0; to height: auto; using CSS?).

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: 0;
  max-height:0;
  overflow:hidden;
  background: yellow;
  transition: max-height 1s;
}
.set-overflow:hover .element{
  max-height:100px;
}
<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

Old answer: Instead of moving the element around on hover, why don't you use plain old visibility? Like so: https://jsfiddle.net/wpxehqkb/

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274385

make your child element to be height:0 on non-hover state:

.set-overflow{
  width: 300px;
  height: 300px;
  position: relative;
  overflow: auto;
}
.set-relative{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: blue;
}
.element{
  position: absolute;
  right: 0;
  bottom: 0;
  height:0;
  overflow:hidden;
  background: yellow;
}
.set-overflow:hover .element{
  height:auto;
}
<div class="set-overflow">
  <div class="set-relative">
    <div class="element">content</div>
  </div>
</div>

Upvotes: 2

Related Questions