Please check this fiddle
https://jsfiddle.net/manuchadha/rc0dxog1/12/
How does bottom and right work in css as in the following example? They don't seem to have any effect.
HTML
<div id="div3"> top left bottom right div</div>
CSS - this CSS moves the div as per top and left. Right and bottom have no effect.
div#div3 {
width:100px;
height:100px;
background-color:#eaf;
position:relative;
top:50px;
left:50px;
right:50px;
bottom:50px;
}
This CSS moves the div up as expected.
div#div3 {
width:100px;
height:100px;
background-color:#eaf;
position:relative;
right:50px;
bottom:50px;
}
But this CSS seems to give top and left priority over bottom and right.
div#div3 {
width:100px;
height:100px;
background-color:#eaf;
position:relative;
right:50px;
bottom:50px;
top:50px;
left:50px;
}
What is the expected behavior if I give all four properties in the CSS - top, left, bottom, right? Shall I specify only one of right or left and one of bottom or top?
With position:relative, you cannot specify all four at once. In fact this only makes sense if you are using position:absolute.
relative means 'shift the element a certain amount vertically and horizontally relative to its normal position'. If you specify left:10px and right:10px at the same time, what does that mean? Should the browser move the element to the left or to the right? It is not clear. So, in practice, one rule is simply ignored.
Take a look at MDN's article on CSS position:
Except for the case just described (of absolutely positioned elements filling the available space):
If both top and bottom are specified (technically, not auto), top wins.
If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.).
You should save calling top left right and bottom for position: absolute
Try calling margin-right and margin-bottom
Related
I want a web page which would have an rectangle at the top of the webpage coming from the browser.
I currently have a square created by css, but I am trying to get it to be an square that should come out from the top of the page.
like this
image from the corner
I am using css with wordpress elementor to create the square
This is my css
content:"";
position:absolute;
top:0;
left:0; right:0;
z-index:-1;
height:100%;
width:100%;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size:200% 200%;
the result which is coming out currently is this
centered image
We need info about your HTML. I'll assume that the element you want to position is a direct child of the body element (or a pseudo element that belongs to body). In that case you can use position:absolute since an absolute positioned element looks for the nearest ancestor, if not It's positioned in the viewport.
Keep that in mind because you may need position fixed or sticky if the above don't apply.
I'm also seeing that you're using a left:0 and right:0; which means that the positioned element will take all the available space on the left and right (It's the same as saying width:100%).
There is more... You're using a width of 100% and the image that you've provided to us doesn't. Also, don't set percentages on height. You could use the vh(viewport height) unit in this case.
Finally, I've just created a fiddle that kind of represents what you're looking for.
myFiddle: https://jsfiddle.net/lucasdavidferrero/4ak6pe8j/41/
Try this:
you can change the size by changing height and width and also by changing right, you can move it right and left.
.container:before{
content:"";
position:absolute;
top:50px;
right:-50px;
z-index:-1;
height:5rem;
width:10rem;
background: linear-gradient(270deg, #0fffc1, #7e0fff);
background-size:200% 200%;
}
<div class="container"></div>
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
I have a 3 column table layout with the center column being position:relative;
inside the center column I have a form which needs to be position:fixed; (well, unless there is another way)
What I need is the form to have a liquid width when the browser widens, but it also needs to stick to the bottom of the page. So, if I use position:fixed; it stays at the bottom, but it overlaps the right sidebar. If I use position:relative; it stays between the sidebars like it should, but it scrolls with the page.
I made a little jsfiddle but it doesn't display fixed positioning. But you can see my code. http://jsfiddle.net/winchendonsprings/S5zkm/1/
Here you can see it overlap the right sidebar. http://i.imgur.com/awp07.png
#center {
padding: 0 15px;
background-color: green;
position:relative;
}
div.main {
position:absolute;
bottom:0px;
left:0px;
right:0px;
}
You can try that (absolute positioning within relative positioning parent).
Play with the top and bottom values to position it vertically.
(It should resize with the window horizontally).
Is that what you want?
I want to make the div 1 on top of the div 2, but this doesn't work
.div1, div2 {
width:100px;
height:100px;
float:left;
}
.div1{
left:-50px;
position:relative;
z-index:-1;
}
.div2{
left:-50px;
z-index:1;
position:relative;
}
If your blue box appears first in the HTML, then change bluebox's left to px and redbox's left to -204px. If the red box appears first in the HTML, then change redbox's left to 0px and bluebox's left to -204px.
(The extra 4 pixels is for the 2 px border on either side.)
Using Myles' JSFiddle, here is a demo of the position:relative solution: JSFiddle
If you want the blue box on top you have to give it a higher z-index value. Right now it is lower.
That doesn't really matter though because you have them both floated and margined left so that they don't actually overlap.
Try giving the red box margin-left: -200px and give the blue box z-index: 10.
Try to avoid negative z-index values,
try using z-index:1 on .bluebox and z-index:2 on .redbox
Here you go:
Live Demo
Clever blend of absolute positioning and z-index :)
In your example, the boxes aren't overlapping because they're floating next to each other, then you move them both to the left 100px. Try only moving the red box to the left, then give the blue box a higher z-index if you want it to be on top. The z-index is the stacking order, where elements with lower numbers appear below elements with higher numbers. The Mozilla Developer Network has good information on this topic.
With some slight tweaking, this works fine for me: http://jsfiddle.net/mlms13/ZGJXt/2/
I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:
<div id='ranImg1' class='ranImg'></div>
Then I style them using this css:
.ranImg {
position:fixed;
z-index:0;
width:250px;
height:250px;
display:block;
}
#ranImg1 {
left:10px;
top:200px;
background-attachment:fixed;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).
EDIT
I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?
your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
you could also set the background-position attribute to set the background relative to the containing div:
background-position: 0px 0px;
i'm not sure if that would help any beyond just removing background-attachment though (not enough coffee yet!)