1

I want to position my element relative to my window for which i use fixed position but in one case it does behave strange.

My code looks like this:

<div style="
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    max-width: 300px;
    width: 300px;
    background-color: red">
something

  <div style="width: 100px; height: 100px; background-color: blue; position: fixed; left: 0">
  Gallery
  </div>
</div>

As you can see second element is fixed and IT HAS TO BE inside first element but for some reason translate property also moves fixed child elements. What can i do to achieve this?

Here is the fiddle: Fiddle

Aleksa Ristic
  • 2,394
  • 3
  • 23
  • 54

2 Answers2

0

Because transform is purely visual. It's not actually moving the element in the layout. It seems unlikely that a fixed position element has to be inside an non-fixed one though.

I'm unsure why you are centering the parent like that though, it's unnessarily complicated.

As an alternative:

body {
  margin: 0;
  padding: 0;
  text-align: center;
}

.parent {
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
  max-width: 300px;
  width: 300px;
  background-color: red;
}

.gallery {
  width: 100px;
  height: 100px;
  background-color: blue;
  position: fixed;
  left: 0;
}
<div class="parent">
  Contents
  <div class="gallery">Gallery</div>

</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
-1

You can try this: 

<div class="wrapper">
something
  <div class="gallery">
  Gallery
  </div>
</div>

and 

body {
  margin: 0;
  padding: 0;
}
.wrapper {
    padding-left: 5px;
    padding-right: 5px;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    max-width: 300px;
    width: 300px;
    background-color: red

}
.gallery {
  width: 100px; height: 100px; background-color: blue;
}

here your fiddle modified

Caro
  • 612
  • 5
  • 10