I am trying to make an overlapping a DIV onto other visually . I am trying
{
position:absolute;
top:-10px;
}
in css, but I found that this top attribute is not working properly in firefox. Dear fellas, how to do that? Please help me with some codes or examples.
thx in advance
Here's an easy way
CSS
.top {
position: relative;
}
.topabs {
position: absolute;
}
HTML
<div class='top'>
<div class='topabs'>
I'm the top div
</div>
</div>
<div>No styles, just frowns :(</div>
The relative positioned div collapses as there are no contents, causing the coordinates 0,0 coordinates of the absolute positioned div to be that of the div underneath.
Fiddle
http://jsfiddle.net/y5SzW/
Try this, I like to use relative position for this kind of thing.
<html>
<head>
<style type="text/css">
body{
background-color: #000;
padding:0;
margin:0;
}
#bottom {
width: 200px;
height: 200px;
border: 5px #fff solid;
background-color:#f00;
margin: 0 auto;
}
.top {
width: 200px;
height:200px;
top: 10px;
left: -100px;
z-index: 10;
background-color: #00f;
color: #333;
border: 5px solid #fff;
position: relative;
}
</style>
</head>
<body>
<div id="bottom">
<div class="top"></div>
</div>
</body>
</head>
I would of course seperate the CSS into it's own file later.
Just use position: relative instead of absolute, or add a negative margin-top: -10px instead.
Related
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
I am trying to build a container with the dimensions of 26x26 pixels and display a number at the very bottom right of this container. In addition, I would like to add a background 24x24 picture to the container.
The code I have so far is as follows
<html>
<style>
body {
height:26px;
width:26px;
background-color:red;
}
#bottom {
vertical-align:bottom;
text-align:right;
background-color:yellow;
}
</style>
<body>
<p id="bottom">2</p>
</body>
</html>
And here's a JSFiddle link to make things easier https://jsfiddle.net/n8ku715x/
As you can see from JSFiddle, it is not entirely working. It's not even setting the right dimensions. Any help is appreciated.
<style>
body {
}
#ctn {
height: 26px;
background-color: red;
width: 26px;
position:relative
}
#bottom {
position: absolute;
bottom: 0;
right: 0;
font-size: 8px;
color: #fff
}
</style>
<body>
<p id="ctn"><span id="bottom">2</span></p>
</body>
Here's your container, with the number within it - is that what you were looking for?
Try this:
CSS
.container{
width:26px;
height:26px;
position:relative;
background-color:red;
}
.container-number{
position:absolute;
bottom:0;
right:0;
background-color:yellow;
}
HTML
<div class="container">
<div class="container-number">2</div>
</div>
Just add bottom 0 and position to the class if u wants the fixed
CSS
#bottom {
background-color: yellow;
bottom: 0px;
position: fixed;
}
I'm making a website from scratch and in my navigation bar, I have a div to the left hand side which I have a hyperlink saying 'Dwayne Walker' in it.
For some reason it is 'spilling' out of the div, I think its because I have a diagonal border in the div. Here is an image:
Here is my HTML:
<div class="logo">
Dwayne Walker
</div>
Here is my CSS:
.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;}
Can anyone help me fix this?
Your anchor text is inside the div only. But if you need the text to visible on the border, then you simply need to remove height from you .logo div as there is no need for height. And then implement the following css, and it's done.
You can see the output by Run code snippet.
.logo {
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;
position: relative;
}
.logo a {
position:absolute;
top: -35px;
left: 25px;
color: #fff;
}
<div class="logo">
Dwayne Walker
</div>
You can also choose not to use position:relative; in .logo, for that you will have to set top property of .logo a to positive value.
But it is NOT a good practice as the .logo a will become relative to body tag or the nearest parent having postion:relative
Here you go!
<div class="logo">
<a class="site-name" href="index.html">Dwayne Walker</a>
</div>
.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;
position:relative;
}
.site-name {
position:absolute;
top:-50px;
left:0;
}
With some extra color to make clear what's going on:
.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid green;
background-color: yellow;
}
<div class="logo">
Hi
</div>
Not sure what the best way is to actually stick text on the border, but there are probably plenty of solutions and opinions about which is best there (or if that's even the "right" approach to making that logo shape).
My idea is probably adding a margin-top: -50px inner container around the actual link, which is probably all-kinds of terrible style, but probably works just the same.
.logo {
height: 0px;
width: 150px;
border-top: 50px solid red;
border-right: 50px solid transparent;
}
.logo-content {
height: 50px;
margin-top: -50px;
line-height: 50px;
padding: 0px 10px;
}
<div class="logo">
<div class="logo-content">
Hi
</div>
</div>
I'm not sure what is exactly the problem.
because the hyperlink is exactly where it's suppose to be. inside the DIV parent!
i'm guessing your'e trying to put the hyperlink inside the red part
which is the red top-border. and if it is so it may be done by using positioning which is the most efficient way to do that:
look my code below:
.logo {
height: 50px;
width: 200px;
border-top: 50px solid red;
border-right: 50px solid transparent;
outline: 1px dotted green;
position: relative;
}
.logo a {
position: absolute;
top: -35px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="logo">
Dwayne Walker
</div>
</body>
</html>
using position:absolute on the child element is the most efficient way to control element's position relative to the first parent which has a position:relative\absolute.
w3schools:
position: absolute;
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
I have three div's and try to draw a border on every div.
But it only shows a border at the top of the div`s, as you can see here.
This is my code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.mydiv
{
position: relative;
border:1px solid yellow;
}
.mydiv_content
{
position: absolute;
border:1px solid red;
}
.mydiv_buttons
{
position: absolute;
border:1px solid green; /* D8D8D8 */
}
</style>
</head>
<body>
<div class="mydiv">
<div class="mydiv_content">
<p> TEST 1</p>
</div>
<div class="mydiv_buttons">
<br>
<input type="submit" value="send"></input>
</div>
</div>
</body>
</html>
I don't know why it only shows the border at the top, it would be great if someone can explain this to me. You can find the full code on jsfiddle.
That's because you are setting height with % relative to the parent div which is position:absolute and has no height defined because your are using on it height:800%; that has no affect because of the position property.
Just define the height of the parent in px:
.mydiv
{
position: relative;
border:1px solid yellow; /* D8D8D8 */
width:70%;
height:800px; // define the height
margin-top: 100px;
margin-left: 200px;
}
Your .mydiv element is not getting proper Height
.mydiv {
position: relative;
border: 1px solid yellow;
width: 70%;
height: 80px; //added
margin-top: 100px;
margin-left: 200px;
}
Working Demo
Try change all your class position:absolute; into position:relative;. Or remove the position:absolute in child div.
Try get rid child div height. So won't be huge space in parent div.
Example look at my demo.
My Demo
I've been trying to get the the left and write columns to stick to the bottom of the green box like this http://i.imgur.com/zxChJx5.png but after an hour I'm still having trouble, if anyone could help that would be most appreciated, thank you very much http://jsfiddle.net/jybu6j47/
<!DOCTYPE html>
<html>
<head>
<style>
.well {
height: 300px;
width: 50%;
background-color:green;
}
.something {
background-color: yellow;
}
.left123 {
width: 50%;
float: left;
background-color: pink;
}
.right123 {
width: 50%;
float: right;
text-align:right;
background-color:red;
</style>
</head>
<body>
<div class="well">
Filler
<div class="something">
<div class="left123">Left</div>
<div class="right123">Right</div>
</div>
</div>
</body>
</html>
You need to position:relative; the container, and position:absolute; the contents, then set bottom: 0 on the contents like this:
http://jsfiddle.net/jybu6j47/1/
So it should look like this:
.well {
height: 200px;
width: 50%;
background-color:green;
position:relative;
}
.something {
position:absolute;
bottom:0;
width:100%;
background-color: yellow;
}
Position absolute tells an element exactly where to be, relative to it's closest position:relative (or absolute – or a couple of other properties come to think of it) container. In this case, giving it bottom:0 is effectively saying "Put me zero pixels from the bottom of the container".