CSS Position - Top 100% Is Not Equal to Bottom 0

CSS Position - top 100% Is Not Equal To bottom 0

That is because top value takes the top edge as a reference point, you need to use transform: translateY(-100%) to make the bottom edge a reference point.

.top {

  position: fixed;

  top: 100%;

}

.bottom {

  position: fixed;

  top: 100%;

  transform: translateY(-100%);

}

<div class="top" style="padding:20px;border:1px solid #000;">TOP: 100%;</div>

<div class="bottom" style="padding:20px;border:1px solid #000;">BOTTOM: 0;</div>

CSS 100% height with absolute positioning top 0 bottom 0

I am now using this as well, and was
wondering if there is any reason not
to?

This technique works fantastically in modern browsers - there is no reason not to use it.

(unless you care about some really old browsers (IE5/6?), which don't support setting top and bottom or left and right on the same element)

Here's an answer I wrote earlier today which uses a similar technique.

Why does top: 100%; not work on relative but is taken into consideration if animated?

In your instance, a height of 100% is needed on the body/html if you want top to work, relative to the height of the window.

html, body { height:100%; } (example)

Given the current example, the parent element, body, has dimensions defined based on its containing children. Since the child elements have a height of 100px, that means that the body then also has a height of 100px, as those are the only elements that exist within it. Thus, top:100% will have absolutely no effect on the containing elements, as these elements determine the dimensions of the parent.

In order for top:100% to work, the parent element's height has to be directly defined, as opposed to being expanded based on the children elements. Something like top:222px would work, as that is an absolute value from the top. But using % based values requires dimensions, as 100% of 0 is also 0. You could set the parent, body to height:500px (example), and it would work. But if you want it based upon the window's height, then body, html { height:100% } would be required.

As for why the animation itself works using jQuery, it is because px based values are used to move the element in the DOM, rather than percentage based ones. Thus this would work in plain CSS too (stated above). Taking a look at the code during the animation demonstrates this, here is a screenshot. As you can see, px values are used to move the element. The only difference is that jQuery makes the calculation to figure out the height of the window. Other than that, jQuery isn't doing anything special that would otherwise be unachievable in pure CSS. You could do the exact same thing using a CSS animation, assuming px values are used... but that is no longer an issue as you now know to set the height of the parent element, enabling you to use percentage based values instead.

CSS: height:100% vs bottom:0

The height of the child element is determined differently for each property:

bottom: 0 =>
child_height = parent_height - child_margin - child_border

height: 100%=>
child_height = parent_height

In other words height: 100% set the inner height of the child to the same height of its parent, while bottom: 0 sets the outer height of the child to the same height of its parent.

example: http://jsfiddle.net/2N4QJ/1/

More info about position/dimension:
http://msdn.microsoft.com/en-us/library/ms530302(VS.85).aspx

css top and bottom not working on element

Use the position and width settings on .img-description as shown below. And since you use opacity 0 and 1, you can erase the visibility settings (or vice versa) The text centering is of course optional, as is the white text color (which does improve the visibility, though).

.projects {

  padding-top: 50px;

}

.desktop-image {

  position: relative;

}

.desktop-image:hover img {

  -webkit-filter: blur(5px);

  filter: blur(5px);

  cursor: e-resize;

}

.desktop-image > img {

  width: 700px;

}

.img_description {

  position: absolute;

  bottom: 13%;

  left: 0;

  right: 0;

  width: 100%;

  text-align: center;

  color: #fff;

  opacity: 0;

  transition: opacity .7s, visibility .7s;

  font-family: inherit;

}

.desktop-image > a:hover .img_description {

  opacity: 1;

}

<div class="projects">

  <div class="desktop-image">

    <a class="desktop-image" href="https://www.stellamccartney.com/gb" target="_blank">

      <img src="https://www.thesun.co.uk/wp-content/uploads/2017/08/nintchdbpict000342472436.jpg?strip=all&w=960&quality=100">

      <p class="img_description">

        An event directory that I<br> founded. Development, design &<br> content by me.

      </p>

    </a>

  </div>

</div>

---

Related Topics