I know it's redundant question, but answers which I saw are unbelievable. Multiple lines for such easy task? No way.
I want to keep img at the end of page (not at the end of displayed screen - I have this issue now).
current, wrong code:
#footerimg {
position: absolute;
right: 0px;
bottom: 0px;
z-index:-2;
}
I need a situation, when I will not be able to see the image until I scroll at the bottom of page.
I can't believe that there is no such option in CSS like bottom-page:0px
EDIT:
Meet CSS transform property - apply transform: translateY(100%).
See demo below:
#footerimg {
position: absolute;
right: 0px;
bottom: 0px;
z-index:-2;
transform: translateY(100%);
}
<img id="footerimg" src="http://placehold.it/200x200"/>
EDIT:
Looking at the image added to the question, I think you don't need positioning - just put the img as the last element in the html markup.
A possible solution can be this:
.content {
height: 120vh;
}
section {
text-align: right;
}
img {
vertical-align: top;
}
<section class="content"></section>
<section>
<img id="footerimg" src="http://placehold.it/200x200" />
</section>
You need to define positioned relative block-level element at the end of body. This will create new block formatting context and all inside absolute positioned elements will be placed relatively to it.
Look at snippet example:
body {
width: 100%;
}
.blk1 {
display: block;
width: 100%;
height: 500px;
background: orange;
}
.blk2{
display: block;
width: 100%;
height: 300px;
position: relative;
background: #9c9;
}
img.btm {
position: absolute;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 1s ease;
}
.blk2:hover .btm {
opacity: 1;
}
<div class="blk1">
</div>
<div class="blk2">
<img src="//placehold.it/100/100" class="btm">
</div>
Here is another solution:
body {
width: 100%;
position: relative;
}
.blk1 {
display: block;
width: 100%;
height: 200vh;
background: orange;
}
body:after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 100px;
height: 100px;
background-image: url('//placehold.it/100/100');
}
<div class="blk1">
</div>
So you can just add position: relative to body css styles
body {
position: relative;
}
and add body:after:
body:after {
content: "";
display: block;
position: absolute;
bottom: 0;
right: 0;
background-image: url('//placehold.it/100/100');
}
Your question is little bit making confusing me you mentioned in your question like that: "when I will not be able to see the image until I scroll at the bottom of page."
Then I think you do not need any effort you need just place image under footer container, when you will go bottom then you will be found at bottom of the page and this is very traditional way no need any tricky code for that.
Related
This is so strange that I can't even replicate the error in jsfiddle despite copy-pasting the code.
Basically I have it like this:
<div class="container">
<div class="absolute-background" />
<div class="where-is-this" />
</div>
With this CSS:
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
This should display a red box at the top of the screen, as it does in this fiddle: https://jsfiddle.net/Lmj6d625/
However, in my actual page (on the same browser) the blue covers EVERYTHING. I can even add new divs below with text and they are completely hidden.
Screenshot:
Where is my div?!
Anyone have any suggestions how to troubleshoot this?
The z-index property only works on elements with a position value other than static (e.g. position: absolute;, position: relative;, or position: fixed).
There is also position: sticky; that is supported in Firefox, is prefixed in Safari, worked for a time in older versions of Chrome under a custom flag, and is under consideration by Microsoft to add to their Edge browser.
Thanks to Evert for this answer
1.) DIV Tags can't be self closing
2.) You need a height for the body tag, otherwise it will have 0 height, and that will also apply to container and .absolute-background, making them invisible.
3.) You need position: absolute or position: relative for the z-index of the red DIV to become effective (fixed would also work, but then it wouldn't scroll with the rest of the page)
html,
body {
height: 100%;
margin: 0;
}
.container {
background: transparent;
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.absolute-background {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: blue;
z-index: 0;
}
.where-is-this {
position: absolute;
height: 100px;
width: 100%;
z-index: 1000000;
background: red;
}
<div class="container">
<div class="absolute-background"></div>
<div class="where-is-this"></div>
</div>
I want my content from &:before and &:after appear outside my div.first and before and after.
I thought the best way is using the css above, but it still appears inside my div, am I using the wrong method or is it something else?
Jsfiddle: https://jsfiddle.net/1uuL3sf6/1/
HTML
<div class="first">
</div>
CSS
.first
{
width: 100%;
height: 500px;
background-color:red;
&:before
{
content:"before";
width: 100%;
height: 20px;
}
&:after
{
content:"after";
width: 100%;
height:20px;
}
}
The pseudo elements :before and after do not create content before and after their parent element. They are inserted before and after its actual content.
A pseudo-element does exactly what the word implies. It creates a phoney element and inserts it before or after the content of the element that you’ve targeted.
From "Learning To Use The :before And :after Pseudo-Elements In CSS"
That's why they are always displayed inside the box of their parent.
However, as an example you can use absolute positioning to move the pseudo element out of the box:
&:before {
content:"before";
position: absolute;
top: -20px;
width: 100%;
height: 20px;
}
But you can also float them or display them as block to achieve your desired result.
Demo
Try before buy
.first {
width: 100%;
height: 500px;
background-color:red;
}
.first::before
{
content:"before";
}
.first::after
{
content:"after";
}
<div class="first">
</ br> This is your first div. </ br>
</div>
Here is a solution: https://jsfiddle.net/e8qtoxL9/
.first
{
width: 200px;
height: 200px;
margin: 0 auto;
background-color:lightgreen;
position: relative;
&:before
{
content:"before";
width: 100%;
height: 20px;
display: block;
background: lightblue;
left: -100%;
top: 0;
position: absolute;
}
&:after
{
content:"after";
width: 100%;
height:20px;
display: block;
background: lightblue;
left: 100%;
top: 0;
position: absolute;
}
}
I have a table structure and I need the nested element to take all the size of the table cell div. So I put it to absolute and define all its positions to 0, it works great on FireFox and Chrome but not on IE :(
Here is the markup :
<div class="table">
<div class="cell">
<figure class="illustration">My illustration</figure>
</div>
</div>
The CSS :
.table {
display: table;
width: 400px;
}
.cell {
position: relative;
display: table-cell;
height: 600px;
background-color: grey;
}
.illustration {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
color: #fff;
}
Here is my pen :
http://codepen.io/balix/pen/qEMwzj
If you see the red background it's ok ;)
Any hack for IE ?
I had the same problem.
In case some one is still looking for a workaround you need to create a container inside .cell with
.cell > div{
height:100%;
width:100%;
position:relative;
}
It's not a position problem, your figure just has zero height. I simply inserted height: 300px into the illustration class and now it works fine on IE:
.illustration {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red;
color: #fff;
height: 300px;
}
http://codepen.io/anon/pen/QwVRoE
In a real code you sure will have some image inside the figure tag so it should be no problem.
I'm creating a basic webpage, but for the footer there is going to be a slanted edge that will run at the bottom of the page. Where I am having issues as you are unable to add 100% on a border, as i am using bootstrap, so the page must be responsive. Is there a way to achieve this affect whilst being responsive.
div {
width:200px;
height:80px;
background: red;
top:150px;left:100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 40px; right: 0;
border-right: 200px solid white;
border-top: 40px solid red;
width: 20;
}
http://jsfiddle.net/2bZAW/3675/
This should work for you. Again, I've used a pseudo element in order to alter the color, but the general consensus is the same. Both the linked question and this use overflow:hidden on the parent and hence won't scroll. As for rotating, since I've used a pseudo element, this should not be an issue:
.wrap {
height: 500px;
width: 100%;
display: inline-block;
position: relative;
overflow: hidden;
z-index: 8;
}
.wrap:after {
content: "";
position: absolute;
height: 130%;
width: 100%;
transform: skewY(-4deg);
background: tomato;
top: -50%;
z-index: -2;
left: 0;
}
.lower {
position: absolute;
bottom: 15%;
right: 0;
}
<div class="wrap">
Hello, World!
<div class="lower">Wanted text here?</div>
</div>
I'm looking for a CSS-only solution, to create a fixed header on a div, where the scrollbar for the content starts next to (and not below of) the header. To get an idea on how it should look, have a look at this fiddle:
http://jsfiddle.net/V4uL6/
Here, I tried to take the following approach:
HTML
<div class="outer">
<div class="top">Title</div>
<div class="body">
<div class="content">
.... Text Content here ...
</div>
</div>
</div>
CSS
.outer {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 300px;
}
.top {
z-index: 2;
position: absolute;
height: 30px;
width: 100%;
}
.body {
z-index: 3;
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.content {
margin-top: 30px;
}
The problem with this approach is, that the content lies on top of the header (you'll see it as soon as you start scrolling). It however feels like, it is really close to a solution. But since I haven't found anything on the web, I fear that this is only doable with JavaScript. So is that true or is there a CSS-only solution for this problem?
Set z-index on body to 1, or any number lower than the z-index on top.
EDIT: You still have the issue of the scrollbar being hidden, but since you said you wanted the scrollbar next to, and not under the header, you can change that by adjusting the width on the content classes.
I found a solution! The trick is to apply z-index: -1 to the content element and remove the z-index from all other elements:
.outer {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 300px;
}
.top {
position: absolute;
height: 30px;
width: 100%;
}
.body {
position: relative;
width: 100%;
height: 100%;
overflow: auto;
}
.content {
position: relative;
z-index: -1;
margin-top: 30px;
}
Here is the updated fiddle: http://jsfiddle.net/V4uL6/3/