I'm trying to move some images but I can't move them. I moved other images just fine but these ones won't move?
HTML: (it's a little larger with more images but i can't even move one)
<main>
<p class="window1"> Window 1 </p>
<img class="uparrow1" src="images/up.png" alt="Up">
</main>
CSS:
.uparrow1 {
position: absolute;
top: 300px;
left: 100px;
}
It doesn't response at any command.
Be sure to set the containing div to position: relative, in this case .main.
You can't move your child elements positioned in absolute if you don't set your parent element in relative.
Ex.
CSS
.parent{
position:relative;
}
.child{
position:absolute;
left:100px;
}
HTML code
<div class="parent">
<div class="child">Move me</div>
</div>
Resources for more info: http://www.w3schools.com/css/css_positioning.asp
Related
I am trying to understand why a div with display:block will not sit under another div with display:block
My mark-up is this:
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: absolute;
top:0;
left:0;
}
.container .text-left{
position: absolute;
top:35rem;
left:35rem
}
.container .text-right{
position: absolute;
top:35rem;
right:35rem
}
<div class="container" >
<img src="/image1.jpg" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="/image2.jpg" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
I am trying all sorts of stuff to make this work - overflows etc - but can't seem to get the second display block div to sit under the first.
EDIT: It seems that if you put position:absolute element/s inside a position:relative element - that may have height due to that element being an image - the absolute element/s removes this height. So you need to add it back in as height: X.
But why??
Is this due legacy mark up - using absolutes in ways not designed for?
Why would the browser not take into consideration the image height as default. And we could override this if needed.
Can anyone please enlighten me?
thanks
The reason you have lost height is because position:absolute; removes element from the flow, therefore your parent container won't be able to use it to work out its height. It's not legacy markup, it's part of the scope.
A quick excerpt from CSS-Tricks
The trade-off (and most important thing to remember) about absolute positioning is that these elements are removed from the flow of elements on the page. An element with this type of positioning is not affected by other elements and it doesn't affect other elements. This is a serious thing to consider every time you use absolute positioning. Its overuse or improper use can limit the flexibility of your site.
If for whatever reason you are required to have that specific element as position:absolute; your next best bet would be to adjust the parent container using JavaScript/jQuery, however that might be a bulky fix.
My suggestion would be to try and achieve your preferred layout without using the absolute positioning, and then if you get stuck, post another question here explaining your desired layout and current code trying to achieve it.
EDIT
That being said, if the mentioned JavaScript/jQuery solution does not sound to bulky to you, you could try the following:
$('.container').each(function(){
$(this).css({
'padding-top': $(this).find('img').height()+'px'
});
});
This will add padding-top to the container based on the image size. Alternative, you could add an empty div below the image and adjust its height based on the image size.
To make it work just make the img and test_* position to relative instead of absolute. Why ? Position absolute removes element from the flow, that means that because all your container's childrens are absolute, it is like your container has no content, that's why it collapse.
.container{
display: block;
position: relative;
}
.container img{
width: 100%;
position: relative;
top:0;
left:0;
}
.container .text_left{
position: absolute;
top:90%;
left:5%;
color: #fff;
}
.container .text_right{
position: absolute;
top:90%;
right:5%;
color: #fff;
}
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_left">
<h2>HEADING 1</h2>
</div>
</div>
<div class="container" >
<img src="https://placeimg.com/640/480/any" alt="">
<div class="text_right">
<h2>HEADING 2</h2>
</div>
</div>
Say I have three divs like following:
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
I want div: element to be fixed when it is inside div: container, but its position should become absolute when div: container2 becomes visible, it should not overlap with div - container2, but scroll away at that time with div: container.
A pure CSS solution is preferable, but if not possible I may go for a JS or jquery solution. I have created a fiddle for this, and tried some solution suggested here, which are not working.
What I would suggest is to use javascript to recognize when the scrolling is at a certain point with window.pageYOffset
When it reaches your desired window Y Offset you can start an event that modifies the css value of the positioning from fixed to absolute (by setting the parent container to relative) and bottom at 0.
Check out this jsfiddle https://jsfiddle.net/zq0kkkcx/2/
Also, this is the code that I'm talking about:
document.addEventListener("scroll", function(event) {
if(window.pageYOffset >= 1200){
console.log("1200");
// this is where you want your element to become absolute
// positioned to his parent container
// write your css changes here and apply them to elements
// add relative to container and absolute with bottom 0 to element
} if (window.pageYOffset <= 1200){
console.log("<1200");
}
});
If you want a CSS solution, here is a trick that you can do using z-index. Other than this there is a JS solution.
.wrapper {
width:100%
}
.container {
width:300px;
margin:0 auto;
height:1200px;
background:#ccc;
position: relative;
z-index: -1;
}
.container2{
width:300px;
margin:0 auto;
height:1200px;
background:#fcf;
z-index: 1;
}
.element {
background:#f2f2f2;
position:fixed;
width:50px;
height:70px;
margin-left:250px;
border:0px solid #d6d6d6;
}
<div class="wrapper">
<div class="container">
container1
<div class="element">
fixed
</div>
</div>
<div class="container2">
container2
</div>
</div>
You're looking for a sticky header. There is currently no way to make a header sticky at an arbitrary scroll position using pure CSS - you'll have to look into a JavaScript solution to accomplish that.
Yes, it is 100% possible to do this without any JavaScript
I updated your fiddle
Markup should be like this
<div class="wrapper">
<div class="outer-scroller">
<div class="scroll-container">
container1
<div class="fixed-header">
fixed
</div>
</div>
</div>
<div class="last-container">
container2
</div>
</div>
and css
.wrapper {
width: 100%;
height: 300px;
}
.outer-scroller {
height: 140px;
overflow-y: scroll;
}
.scroll-container {
padding-top: 70px;
width: 300px;
height: 1200px;
background: #CCC;
}
.last-container {
width: 300px;
height: 600px;
background: #FCF;
}
.fixed-header {
background: #F2F2F2;
position: absolute;
width: 300px;
height: 70px;
top: 0;
pointer-events: none;
}
You'll see I've added an outer-scroller div.
The next bit is changing your CSS slightly
The new outer-scroller div is double the height of your fixed-header (for the purposes of this example) and it has an overflow-y: scroll on it.
The container inside there is still the same.
The next change is turning your position: fixed into a position: absolute and then adding padding to the top part of the div you want to scroll in order to push its content "below" the new "fixed" header.
Scrolling over the outer-scroller div then makes its content scroll, and because its height is set with an absolute element on top it then scrolls "under" the fixed header.
Once the bottom of its child content scroll-container is reached, the whole page then continues scrolling, and you get the illusion of the header disappearing.
The last bit is pointer-events: none on the header so that it doesn't scroll away when the cursor is over it (but the div below does)
The template I am working with has a container, with content and navigation divs. The code looks something like this:
<div id="user_content" class="user_content">
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<div class="content_nav">
<div class="col-md-3"><a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a></div>
<div class="col-md-3"><a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a></div>
</div>
</div>
See Figure 1 below for drawing.
Relevant CSS for the main_content div:
.main_content {
position: relative;
left: 0px;
width: 100%;
display: block;
transition: transform 0.5s ease 0s;
height: auto;
}
I can change the PHP to generate the BACK and NEXT links without its own div, so it will look like this:
<div id="user_content" class="user_content">
<a id="prevB" href="http://google.com">CLICK HERE TO GO BACK!</a>
<div class="main_content"> some content, text and whatever else, can be pretty long!</div>
<a id="nextB" href="http://yahoo.com">CLICK HERE TO GO NEXT!</a>
</div>
</div>
What I don't understand is the proper CSS to make the <a> BACK and NEXT links to be on the left and right side of the main_content container. See Figure 2 below for drawing.
Here is a link to the JFIDDLE that I've tried: https://jsfiddle.net/7wet25zn/
Position absolute your anchors at top 50% and subtract 0.5em (half the font-size, or any other value):
.user_content {
position: relative;
background: #eee;
height: 160px;
}
.user_content a {
position: absolute;
top: calc(50% - 0.5em);
}
.user_content a.next {
right: 0;
}
<div class="user_content">
<div class="main_content"></div>
<a class="prev" href="#!">PREV</a>
<a class="next" href="#!">NEXT</a>
</div>
If your {content} part is tall and prev and next button should be in the middle of the viewport (not tall div), you may add display:block; position:fixed; top:50%; to prev and next links so it will be visible regardless of height of div.
I recently experienced a similar problem building tooltips on a page. It wasn't something I had encountered before and wanted to do it with HTML and CSS. What ended up working for me was defining a parent container and making the content you want floating like so:
<div class="parent-container">
<div class="child"></div>
<div class="child"></div>
</div>
And defining the CSS as such:
.parent-container {
position: relative;
}
.child {
position: absolute;
}
This allows you to set width and height on the child class as relative to the position of the parent container. Good luck!
Before giving negative vote or placing the question as duplicate, please read the issue first.
I'm having some issue with putting one div under another. I know that make people have asked this question here and I've read all of them and also tried everything out, but none of them worked for me.
Everyone days to give position: relative to to div and then give one higher z-index and another lower. None of them worked for me. So, I'm here for help.
In my project (http://loadtest.isaumya.com/) I have 2 divs i.e.
<body>
<div class="conteiner">blah blah blah</div>
<div id="particle-js"></div>
</body>
I want to put the <div id="particle-js"></div> behind of container, but nothing is working out. So please help.
You have ordered them badly:
<div class="container">...</div>
<div id="particles-js">...</div>
invert positions:
<div id="particles-js">...</div>
<div class="container">...</div>
makes sense since you want your full-screen canvas particles to be naturally z-index lower than the latter #container. Precedence rule.
also add this styles to your particle-js element:
#particles-js{
position:absolute;
top:0;
width:100%;
height:100%;
}
If the above still does not helps (it should) add:
.container {
position: relative;
z-index: 1;
}
Make your canvas element display:block;
Result image:
its just a very simple concept you need to remember about position in css
A relative positioned element is positioned relative to its normal
position
An absolute position element is positioned relative to the first
parent element that has a position other than static.
JSFiddle
this is how you may solve this problem:
<body>
<div class="container">blah blah blah</div>
<div id="particle-js"></div>
</body>
and the css
div {
width: 100px;
height: 100px;
}
.container {
position: absolute;
background-color: blue;
z-index: 1;
}
#particle-js {
position: absolute;
background-color: red;
}
make the z-index higher to wichever element you want a be displayed at the top
Please look at the following example
http://jsfiddle.net/GANeX/90/
I want to show my green colored div outside the wrapper. I cannot change the positioning of the wrapper div as inner-wrapper also holds some other content which may come out when we change the position:relative to position:static.
How can I do this?
You can wrap the things you don't want to overflow in an element with a class called dont-overflow. Set the width of that class to the current .wrapper width, and then remove the overflow from the parent and add it to that class:
CSS dont-overflow class:
.dont-overflow
{
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
height: 200px;
}
HTML:
<div class='wrapper'>
<div class='inner-wrapper'>
<div class='content-wrapper'></div>
<div class='dont-overflow'>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
<div class='content-wrapper'></div>
</div>
</div>
</div>
http://jsfiddle.net/GANeX/97/
I think you need to use z-index.
.inner-wrapper{
position:absolute;
left:10px;
right:10px;
top:5px;
bottom:5px;
z-index: 999;
background:yellow;}