So I'm doing a course where I have to use the z-index to tuck an image behind the div below:
Here's what it is supposed to look like: example
And here is what Mine looks like, even after copying the exact same code, with some tweaks too after reading how other people in my similar situation managed to solve it My version.
Here is the code for the stuff I had to change for it to look like the example:
#features{
padding: 7% 15%;
background-color: white;
position: relative;
}
.iphone-img{
transform: rotate(25deg);
position: absolute;
}
Every time I tried to slightly tweak the up and bottom values, the image's positioning would change drastically. I managed to get the exact positioning I wanted when adjusting with google inspect element, but when actually adjusting in vsc I did not manage to get the same result
There is no z-index in your code.
You need to add it, such as:
.element-background {
position: relative;
}
.element-phone {
position: absolute;
z-index: 2;
bottom: 0;
left: 50%;
}
This code will position your phone image on top of the background, at the bottom and almost in the center.
Related
I've got a site which is about to hit a traffic milestone. As we countdown to our millionth visitor, I thought it would be fun to move my stats widget from the right sidebar, and nest it in the corner of my site header element.
So far, I've managed to use this CSS to move the Widget out of the side menu... but I'm really struggling to figure out how to put this element into another div.
.bottomright {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 18px;
}
This popped the widget out of the sidebar, and made it hover always in the corner. Neat...
My goal though, is to move that widget into this spot
Following this guide from the W3 Schools page, I've tried to nest the widget into the div I want it to go inside of (which is called header.site-header)
Here's the element I want it to go inside:
If I set it's position absolute and fiddle with sizing, I can shove it where I want it to go, but this doesn't look good for tablets or mobiles.
#blog-stats-2 {
position: absolute;
top: 75px;
right:5px;
width: 300px;
border: 3px solid #73AD21;
z-index:5;
}
Is there any keyword I'm missing to nest this in the corner of the site-header div?
You'll need to move your hit counter into the header HTML first before using position: absolute; otherwise it simply won't work. Try something like this.
You'll need to work this into your HTML code.
<header class="site-header">
<div id="blog-stats-2">
<!-- code here -->
</div>
</header>
Then your CSS like this.
header.site-header {
position: relative;
}
#blog-stats-2 {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 123;
}
What that does is moves your hit counter into the header section and positions it absolutely to the bottom right of the header. Using position: relative; on a parent container and position: absolute; on a child element will make sure the top, right, bottom and left attributes are relative to the parents location all the time.
For mobile you'll need to change this further using media queries to make sure it sits inside the header nicely.
#media screen and (max-width: 768px) {
#blog-stats-2 {
left: 10px;
right: auto;
bottom: 10px;
}
}
I am quite new at coding, and I would love spend a lot of time with it, but now I really do not have time for that. I spent two weeks to trying to find out this thing.
I made my portoflio on tumblr. And I used a theme, where the pictures are filling the whole screen, so you can not basically anything, but pictures. Which is good, I wanted it like this. BUT. I would like to leave a little note, actually a pointing arrow picture which says: "keep scrolling for more". So this note is always hidden by the full-sized images.
How can I move the note-image on the very top? Above the image posts?
Which is the easiest way?
I tried some resolution, i have found here, but none of them worked...
I thought would not be a problem, but this is my portfolio, and I still could not send it, because of this issue.
Thank you so much for any help. Sorry for being so dumb.
This is my portfolio.
I don't have experience with tumblr, but based on your tags it looks like it uses HTML and CSS. When you have an image that fills the entire screen and want to add an image on top of that image, you need to have both images within a div container to give them something to reference. This container needs to have position: relative and the style of the images will be relative to it. So, your HTML and CSS should look something like this:
HTML
<div class="container">
<img class="imageOne" src="path/url goes here" alt="" />
<img class="imageTwo" src="path/url goes here" alt="" />
</div>
CSS
.container {
position: relative;
top: 0px;
left: 0px;
}
.imageOne {
position: relative;
top: 0px;
left: 0px;
}
.imageTwo {
position: absolute;
top: 30px;
left: 30px;
}
So your first image is set to 0 pixels from the top and 0 pixels from the left. This mates it to the container div you created to hold the images and set it to the same positioning. Your second image is position: absolute to the container div so it is 30 pixels from the top and 30 pixels from the left and was loaded after your first image and thus placed on top!
Cheers!
You can do it just adding the property z-index: xx to the image (or actually whatever) you want to be above anything else. Also, you can combine it with position absolute or fixed.
div { width: 100px; height: 100px; }
.container {
position: absolute;
top: 0px;
left: 0px;
}
.green {
position: relative;
left: 20px;
top: 20px;
background-color: green;
z-index: 1;
}
.pink {
position: relative;
left: 80px;
top: 0px;
background-color: pink;
z-index: 3;
}
http://codepen.io/paulirish/pen/CgAo
here you can see various examples, credit for Tom Wiltzius
I'm trying to align the elements of my header like on the first image below.
Unfortunately I'm not getting the expected result. The female sign and the image next to it stay stuck to the top of the page.
I've tried to apply a margin-top but the issue if I do that is that it pushes everything else down.
Your help would be much appreciated.
I haven't been able to reproduce this on JSFfiddle, so here is the live link.
Many thanks,
This is what I want (female sign aligned just above the text):
This is what I have:
Try setting position to absolute and then top to 200px I guess.
use position: relative; and change top value. Replace this classes:
.female-sign {
position: relative;
top: 263px;
left: 65px;
}
and
.special-femmes {
position: relative;
top: 230px;
left: 65px;
}
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I was fiddling around with a web site I am developing, attempting to fix some odd IE7 bugs, since this is an internal project and IE7 is the standard browser. I ended up adding "position: relative" to correct a couple IE-specific layout problems, but I seem to have made things worse in FF/Chrome (I consider myself more of a systems programmer, but my current responsibilities involve more of a web focus unfortunately).
The specific problem is that the "position: relative" elements ended up making some of my links, which were floated to the right, unclickable. I've created a simple test page that I hope will explain this better than I can with words: http://jsfiddle.net/gBchZ/.
I will sort through this mess eventually, but I was hoping that someone could explain the reason behind my links getting hidden behind the position: relative elements.
Without having the link of the site is difficult to tell exactly what is wrong. But in any case, a solution could be to use z-index for the parent of a. For example z-index:100. Keep in mind that z-index works only with positioned elements, so you can use position:relative.
Demo based on your example: http://jsfiddle.net/gBchZ/3/
This is because the .content divs are covering the right-box (in your demo). If you add a margin-right to those divs the a becomes 'reachable:'
.content
{
position: relative;
margin-right: 20%;
}
JS Fiddle demo
You could also use position: absolute; to make the a element appear 'higher' in the z-index, though this becomes rather complex:
#rightBox
{
background-color: green;
width: 25px;
height: 25px;
position: absolute;
right: 0;
top: 50%;
margin: -20px .5em .5em .5em;
padding: .5em;
}
JS Fiddle demo
#David’s correct in that the position: relative on the .content items is giving them a z-index, meaning they’re “on top” of the link you’ve floated to the right.
I think a better solution though is to add position: relative; to the link you’ve floated right as well, and give it a z-index higher than .content:
#rightBox
{
...
position: relative;
z-index: 2;
}
.content
{
position: relative;
z-index: 1;
}
See http://jsfiddle.net/gBchZ/6/