I want to move an image from its current position to the right, so I need to add pixels to the left position that it has right now.
I have a flex container in which I have an image and a div. Both of them are centered on the container with justify-content: center; property.
The problem I have is that when I try to move the image that has position absolute, it goes back until its nearest parent that has position relative (its container) and start to add pixels there and it makes a strange visual effect.
HTML code:
<button type="button" onclick="moveImage()">Move image</button>
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow">
</div>
<div id="right" class="block">Right</div>
</div>
CSS code:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
}
.block{
flex: 1;
}
#left{
background-color: red;
}
#center{
position: relative;
display: flex;
background-color: yellow;
justify-content: center;
}
#right{
background-color: orange;
}
#divCentered{
width: 50%;
height: 100px;
background-color: brown;
}
Javascript code:
$( document ).ready(function() {
var divParent = document.getElementById('center');
var div = document.createElement("div");
div.setAttribute("id", "divCentered");
divParent.appendChild(div);
});
function moveImage(){
$("#image").animate({
left: "+=300px"
}, 1000);
}
JSFiddle in which you can see how the image goes back until its parent and start adding pixels there.
Is there a way to avoid that the image back some pixels to its parent and start add pixels in its current position?
Thanks in advance!
Finally, after a lot of proves, I have got a workaround to get this.
I have to use .offset() property to get the container and the image left property taking as reference the document.
Then, I have to set the left property of the image to 0 because it would be positioned when the container is positioned on the left (as the container is the relative parent of the absolute image).
After that, just substract both values to get the differences between the offset of the container and the image to get the actual position of the image regard its container and set this value to the left property of the image.
Here is the code that I have added:
var leftCenterDiv = $("#center").offset().left;
var leftImage = $("#image").offset().left;
$("#image").css("left", 0);
$("#image").css("left", leftImage - leftCenterDiv);
And the updated JSFiddle.
Give the image an absolute horizontal position to start from:
#image {
position: absolute;
z-index: 2;
height: 50px;
width: 100px;
left: 45px;
}
Try to keep the image with initial position so that even adding the pixel it wont change i.e. left:45px. but when you add pixel to existing one and to avoid moving position can be done adding!important` to the left
#image {
position: absolute;
z-index: 2;
height: 50px;
width: 100px;
left: 45px !important;
}
Jsfiddle
Related
This question already has answers here:
Position absolute but relative to parent
(5 answers)
Closed 3 years ago.
I will try to make my question more clear.
Because I used below setting on Html body, I need to scroll the page down to get to page bottom.
body { height: 180vh;}
And I want to set a div position top property relative to document height, so that I can control its position at a place only visible when I scroll down. I prefer to set it by percentage value so that code will adapt different sizes of devices.
But by default the top property is relative to viewport, so I can not realize it by setting top value.
Is there a way to realize what I want to do? even not by top property.
If you give the body a position: relative and the div a position: absolute, you can set the top property as a percentage, where top: 100% will position it at the bottom of the page:
body {
height: 180vh;
background: lightblue;
position: relative;
}
div{
height: 30px;
width: 140px;
border: solid 2px gray;
background: white;
position: absolute;
top: 100%;
}
<div></div>
If i understand your question correctly, there are 2 ways
use padding-top
use position:absolute and top
code snippet below:
body {
height: 180vh;
}
.myDiv1 {
margin-top: 110vh;
height: 100px;
width: 100%;
background: lightblue;
}
.myDiv2 {
position: absolute;
top: 150vh;
height: 100px;
width: 98%;
background: lightpink;
}
<body>
<div class='myDiv1'></div>
<div class='myDiv2'></div>
</body>
First you need to make sure that the position property of the body is relative, absolute or fixed.
You can then set the position: absolute to make the element be dependent on the last parent element that had one of three properties mentioned above.
Finally you can set your top, left, right and bottom properties after that.
body {
height: 180vh;
position: relative;
}
#down {
position: absolute;
// or bottom: 10%;
bottom: 25px;
}
<div id="down">Here</div>
I am trying to do something basic (beginner in programming).
I try to take a large image and a smaller container, and move the image up or down inside while the user scrolls.
So you can .
Move the yellow up or down while the user can see the red in the same position (kept in doc flow).
If i create an image using this :
<div class="cvrContainer top left">
<div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>
Should i set cvrPhoto to be larger then cvrContainer say 200% ?
How do i move it up/down with JS while keeping overflow hidden.
I do not ask how to calculate, only how to set it and move the only yellow inside
If you want to create simple parallax effect, you can achieve this effect by position fixed, add position: fixed on .cvrPhoto div.
.cvrContainer {
padding: 30px;
width: 100%;
height: 2000px;
overflow: auto;
background: url(https://picsum.photos/900/850);
}
.cvrPhoto {
height: 300px;
width: 200px;
position: fixed;
top: 57px;
background: yellow;
}
<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
<div class="cvrPhoto"></div>
</div>
I solved it by using css for the inner image (not background image but img tag) :
.prlxPhoto
{
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-50%);
}
and move it left/right for example with :
var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';
I am trying to overlay 2 DIV's in my main parent DIV:
I want to overlay the the second div over on top of the first one. I have a problem overlaying it as I cannot keep it in the middle of the screen.
I have tried this to overlay:
The overlay works fine here, but my container is no longer center when I do this. How can I overlay and keep it center ?
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Here is what you need to do (see width of both divs and text-align properties):
You can give them background color to see z-index works perfectly :)
#first {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 1;
}
#second {
text-align: center;
height: 300px;
width: 100%;
position: absolute;
z-index: 2;
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
When you position absolute, the positioned element is taken out of the document flow and positioned relative to the next highest parent element that is not the default position, i.e. not position: static;
The following will cause the absolute positioned children to stay within the containing div:
#container {
position: relative;
}
Your container's text is no longer centered because you have removed its children from the document flow. In essence, it has no content and collapses, and therefore, has no width to which to align the text.
One thing you could do is set the container to position: relative and full-width (i.e. width: 100vw), then set its children to width: 100%.
Then the inner divs will take on the width of their parent.
See this working JSFiddle.
#container {
position: relative;
width: 100%;
height: 100px;
background-color: yellow;
display: flex;
justify-content: center;
align-items: center;
}
#first{
position: absolute;
}
#second{
position: absolute;
}
<div id="container" class="container">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
Your main issue is that the divs will not have any relative width to the parent div.
Therefore the text is still technically "centered" in each corresponding div because they're inheriting text-align: center from the container div.
However, the divs' widths will automatically be as wide as they needs to be (i.e. to fit the text, in this case).
You can remedy this one of two ways:
Force the divs to be centered
Give both divs the following (extra) CSS:
left: 50%;
width: 100%;
margin-left: -50%;
This will literally center them in their parent div.
or
Force the divs to be the same size as their parent
Give both the divs the following (extra) CSS:
top: 0;
bottom: 0;
left: 0;
right: 0;
This sets the divs to span their entire parent's height and width.
In both situations, you might need to make the .container class use position: relative, in order for the child divs to have something to be absolute to.
If you're using Bootstrap, there is no need to worry about this, as .container class already has this applied.
Hope one of these solutions helps you :)
Try this style:
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
div {
border: 5px solid red;
}
#first {
position: absolute;
z-index: 1;
border-color: orange;
}
#second {
position: absolute;
z-index: 2;
border-color: green;
}
#first,
#second {
left: 50%;
transform: translate(-50%, 0);
}
<div id="container" class="container text-center">
<div id="first">Hi</div>
<div id="second">Hello</div>
</div>
I've been trying layout with css the div (dark blue) so that changes size according to the size of the window without covering the bottom panel, I thought that with the height to 100% official, but not understand because it ignores the panel below, and ends moving off the page
now that see not let me post pictures, so something is also what I have:
html:
<div id="container">
<div id="message">hi i'm a message</div><!--i can see this div-->
<div id="darkBlue"></div>
<div id="anotherPanel">you can't see me</div>
</div>
and this css
#container{//This container is attached to the right side
right: 0;
width: 300px;
position: fixed;
height: 100%;
top: 0;
color: white;
padding: 20px;
}
#darkBlue{//this div cover the next div
height: 100%;
border: 1px solid white;
background: #3a5193;
bottom: 100px;
}
#anotherPanel{//i can't see this div.......
height: 100px;
botton: 0px;
}
Not sure if you can solve with css, or have to resort to using javascript (which is something I want to avoid), anyone knows some property who can help me?
UPDATE: This is the picture of what layout attempt: https://www.dropbox.com/s/t9nl5mb3sq85m3j/repro.png
Using bottom top left right you must define position. In your case remove bottom from #darkBlue #anotherPanel and add to #darkBlue height: calc(100% - 100px)
DEMO
Update
If you don't want to use calc then add margin-bottom:-100px; to #darkBlue
DEMO
You have a typo in the CSS of anotherPanel. You have botton instead of bottom. Also when using this CSS properties, is good to set the position.
Try this:
#anotherPanel{
height: 100px;
width: 300px;
bottom: 0px;
background: #F00;
position:absolute;
}
Is this the droid you are looking for?
Best.
If you assign a height of 100% to a child element it will take up 100% of the height of the parent element. If you want the element to cover the whole container without being in the document flow of the parent element you can try to do the following:
#darkBlue {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #3a5193;
}
Edit: #Niels has mentioned an additional detail I've not mentioned before. For this to work the parent elements position needs to be set to either fixed, absolute or relative
I'm having trouble getting an overlay to appear on top of the visible portion of another div. The problem is, the container div has overflow, and if the user has scrolled inside that div, the overlay will not cover the scrolled portion. My question is: how can you position a div to fill the visible portion of another div using jQuery - or, alternatively, is there a way to accomplish this using just CSS?
Here is a jsFiddle demonstration, and here's the markup:
HTML
<div class="container">
<div class="overlay"></div>
<div class="content">
<p>Content here</p>
<p>Overflow content here</p>
</div>
</div>
CSS
div.container { position: absolute; height: 100px; width: 100px; overflow-y: auto; }
div.overlay { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #F00; opacity: 0.5; }
div.content p { margin-bottom: 100px; }
and JS (load on DOM Ready)
$('div.container').click(function(){
$('div.overlay').toggle();
});
In order to achieve what you were asking for I did the following
CSS
.container {
/* setting this to relative means
overlay is positioned relative to its parent */
position: relative;
}
.overlay {
/* element taken out of normal flow */
position: absolute;
/* removed bottom and right properties otherwise
updating top property has no effect */
height: 100px;
/* When scrollbar appears width decreases to less than
100px hence having to set to 100% to allow automatic calculation */
width: 100%;
}
JavaScript
Using jQuery I now set the top property appropriately
$(".container").scroll( function( ) {
$(".overlay").css({ top: $(this).scrollTop( ) });
});
Fiddle here
Assuming you really want to cover only the visible portion:
http://jsfiddle.net/GNCaT/1/
<style type="text/css">
div.overlay {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height:100px; /* fixed height, set by CSS or javascript, no bottom */
background: #F00;
opacity: 0.5;
}
</style>
<script>
$('div.container').click(function(){
$('div.overlay').css('top', $('div.container').scrollTop() + 'px').toggle();
});
</script>
This will position the overlay to the top of the visible portion of the container.
You can use the DOM property scrollHeight :
$('div.container').click(function(){
$('div.overlay').css("height", this.scrollHeight).toggle();
});
http://jsfiddle.net/p6k2Z/1/
EDIT :
In order to just overlay the visible portion, you can use this :
$('div.container').click(function(){
$('div.overlay').css({
top: this.scrollTop,
height: $('div.container').css("height")})
.toggle();
});
http://jsfiddle.net/p6k2Z/3/