This question already has answers here:
'transform3d' not working with position: fixed children
(10 answers)
Closed 3 years ago.
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
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>
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
Related
This question already has answers here:
How to center a "position: absolute" element
(31 answers)
How can I center an absolutely positioned element in a div?
(37 answers)
Closed 2 years ago.
I am wondering how i can center absolute element inside container, but without changing position of childs elements inside centered element. *Child elements are absolute too.
I simply want to center the '#ground' both, vertically and horizontally inside container, without moving any child inside '#ground', is it do-able?
#container {
display: grid;
width: 150px;
height: 150px;
background: black;
}
#ground {
position: absolute;
width: 100px;
height: 100px;
background: red;
}
.tile {
position: absolute;
width: 30px;
height: 30px;
background: aqua;
top: 20px;
left: 50px;
}
<div id="container">
<div id="ground">
<div class="tile"></div>
</div>
</div>
Simply.
No as far as my knowledge goes
But, you can center #ground and then move it's content to the original position again with absolute positioning
#container {
display: grid;
width: 150px;
height: 150px;
background: black;
position: relative;
}
#ground {
position: absolute;
width: 100px;
height: 100px;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.tile {
position: absolute;
width: 30px;
height: 30px;
background: aqua;
top: 5px;
left: 25px;
}
<div id="container">
<div id="ground">
<div class="tile"></div>
</div>
</div>
Using absolute positions is not the best way to align the elements. You can use flexbox which is a better way and is responsive too!
#container {
display: flex;
width: 150px;
height: 150px;
background: black;
align-items: center;
justify-content: center;
}
#ground {
width: 100px;
height: 100px;
background: red;
}
.tile {
position: relative;
width: 30px;
height: 30px;
background: aqua;
top: 20px;
left: 50px;
}
<div id="container">
<div id="ground">
<div class="tile"></div>
</div>
</div>
You should use
#ground {
left:(no. of pixels);
top:(no. of pixels);
}
Or you can also use margin and set it as auto.
How to shift a child block?
How to shift the blue block so that it stretches the parent block?
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
top: 350px;
}
<div class="main">
<div class="preMain">
</div>
</div>
Your issue is that your child block has position: absolute; meaning it no longer affects the parent div. If you want to shift the child block down but still have it affect the parent block you need to change the position of the child. Try something like this:
.main {
width: 400px;
min-height: 300px;
background: red;
position: absolute;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: relative;
margin: 350px 0px 10px 10px;
}
Admittedly not a perfect solution but you should be able to achieve the result you're looking for.
Alternately, look to this post here
Hope this helps.
You are using position: absolute, which allows to use bottom and left to position the element correctly.
.main {
width: 400px;
min-height: 300px;
background: red;
position: relative;
}
.preMain {
width: 60px;
height: 60px;
background: blue;
position: absolute;
bottom: 10px;
left: 10px
}
<div class="main">
<div class="preMain">
</div>
</div>
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 3 years ago.
The row div has a top/bottom margin of 10px (margin: 10px 2px). However, the 10px is pushing the position of the main container. What I am trying to achieve is the row has a top/bottom margin inside the main-container. The margin is some how escaping and pushing the main-container.
Here is my code:
body {
padding: 0;
margin: 0;
}
.main-container {
position: relative;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
But if you run this code (below), without the row div. You can see the position of the main-container is different. This is the position the main-container should be in.
body {
padding: 0;
margin: 0;
}
.main-container {
position: relative;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
<div class="main-container">
</div>
How can I fix this?
You should change your position in the .main-container class to be position: absolute instead of position: relative.
Relative positioning will move the element with the flow of the page, whereas absolute positioning will essentially lock it in whatever position you set it to be in. Relative positioning is more for situations like your .row class, where you want it to depend on the positioning of the .main-container class. Absolute positioning should be used when you don't want other elements (specifically the parent element) to determine it's position.
body {
padding: 0;
margin: 0;
}
.main-container {
position: absolute;
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
This article does a great job of explaining why you are having issues when both the parent and child have position: relative. If you take the position off of the parent entirely, you won't even notice a difference. Why? Because there's nothing to position it relative to. If you remove it from the .row class, you will find the same results. Relative positioning looks for an element that has a positioning other than static. In this case, there isn't one, so it's not really doing anything since all of the parents (body, html, etc) have position: static by default.
body {
padding: 0;
margin: 0;
}
.main-container {
display: block;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
display: block;
margin: 10px 2px;
width: 175px;
height: 15px;
background-color: green;
}
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
<div class="main-container">
<div class="row">
</div>
<div class="row">
</div>
</div>
body {
padding: 10px;
margin: 0;
}
.main-container {
position: relative;
width: 183px;
height: 101px;
background-color: red;
}
.row {
position: relative;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
margin: 10px 0;
width: 175px;
height: 15px;
background-color: green;
}
Check it out in https://codepen.io/3rdsty4bl00d/pen/OGbENg?editors=1100#0
I have written a simple code with a main box containing two smaller boxes inside.
I have set the position of the smaller boxes to absolute, in order to set their positioning according to their parent.
What i would like to do is to bring the son2 div in front, since now is hidden by sondiv
I tried the z-index property but (as i expected) my element gets under the parent element, and not under the small blue box
#parent {
position: absolute;
background-color: red;
width: 100px;
height: 100px;
margin-top: 200px;
margin-left: 200px;
}
#son2 {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
margin-top: 20px;
}
#son {
position: absolute;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 10px;
}
<div id="parent">
<div id="son2"></div>
<div id="son"></div>
</div>
Demo on Codepen: https://codepen.io/mattiasu96/pen/KbpyNQ
Tiny change (just add z-index: 1; to son2).
By the way you don't want to set position: absolute for the parent unless you need to change its position from the natural one as well, otherwise go with position: relative so that it's rendered normally but the absolute positioned children still behave as intended.
I've removed the margins from the parent just so you don't have to scroll in the snippet in order to see the divs, but no difference if you need that in your original problem.
#parent {
position: relative;
background-color: red;
width: 100px;
height: 100px;
}
#son2 {
position: absolute;
background-color: green;
width: 50px;
height: 50px;
margin-top: 20px;
z-index: 1;
}
#son {
position: absolute;
background-color: blue;
width: 50px;
height: 50px;
margin-top: 10px;
}
<div id="parent">
<div id="son2"></div>
<div id="son"></div>
</div>
Issue: I am trying to make a layout with a fixed header for nag and below that will be an image that will fit the page. below that I want divs for content. the problem I am facing is that I cannot get both the image and the content divs to fit the screen and stack vertically.
The IMG is set to absolute because its the only way I could get it to 100% fit the screen without adjusting the margins. however when I do this the divs below that I am going to use for content: .body2 and .body3 do not show.
I want to get everything flush with the screen of the browser and stacked properly.
HTML:
<header>
<div id="headernav">
</div>
</header>
<div id="FixedBKG">
<img src="Images/imgbkg.JPG" id="bkgimg"/>
<div id="content">
<div class="body2">
</div>
</div>
<div id="content">
<div class="body3">
</div>
</div>
</div>
</body>
CSS:
#headernav {
height: 70px;
top: -10px;
left: 0px;
width: 100%;
background-color: black;
position: fixed;
z-index: 10;
color: white;
margin:0px auto;
}
#FixedBKG {
width: 100%;
height: 100%;
}
#bkgimg {
width: 100%;
left: 0px;
top: 0px;
position: absolute;
}
.body2 {
background-color: #C0C0C0;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
.body3 {
background-color: black;
height: 400px;
width: 100%;
left: 0px;
right: 0px;
display: block;
}
Ok, here's a second draft: FIDDLE.
General comments:
1.Try not to use positioning on a straight-forward layout like this one.
I changed the image to display: block and made it 100% of the div width - it will then adjust itself to the container, and you can
then adjust the container as you wish.
I changed the heights of the two lower divs and added a border so you could see them easier in the fiddle.
You really don't need the 100% widths, since divs are 100% by definition.
You might consider styling the body, and add a container element to give you more flexibility on formatting.
Let me know if you'd like to change anything else.
CSS
img {
display: block;
width: 100%;
}
#headernav {
height: 70px;
line-height: 70px;
text-align: center;
width: 100%;
background-color: black;
color: white;
}
#FixedBKG {
width: 100%;
}
.body2 {
background-color: #C0C0C0;
height: 200px;
width: 100%;
border: 1px solid red;
}
.body3 {
background-color: black;
height: 200px;
width: 100%;
border: 1px solid yellow;
}