I have a div (relatively positioned) containing data, and want a series of buttons sitting on top of the box. These buttons are just div's with absolute positioning. However, if I position them outside the containing div they do not display. They display fine if the positioning is positive (inside the main div). Is it possible to have an absolute positioned div (or other element, I'm not fussy) show outside the bounds of its container? If so, how?
The critical portion of the CSS of one of the 'buttons' is: "position: absolute; right: -3px; width: 20px; top: -27px;"
The main rectangle has the following CSS type (visibility/display are turned on by javascript when the time is right):
.ob{
visibility:hidden;
display:none;
position:relative;
left:1;
top:1;
text-align: left;
vertical-align: top;
padding-top: 12px;
margin-bottom: 20px;
padding-left:2px; padding-right:2px;
border-collapse: collapse;
overflow: auto;
}
An example is defined with the following PHP:
echo " <div id='$portalid.ButtonDelete'
style='border:2px solid ".$onefield["Color.Border"]."; text-align: center; color: ".$onefield["Color.Text"]."; background: ".$onefield["Color.Fill"].";
position: absolute; right: ".$ButtonRight."px; width: 20px; top: -2px;
font-family: Sans-Serif; font-weight: bold;
height: 20px; padding-top: 2px;
z-index:1; cursor:pointer;' title='Delete selected ".$onefield["Display"]."' onclick='alert(\"Not implemented\");'>
X
</div>";
which translates into:
<div id='Delete'
style='border:2px solid red; text-align: center; color: White; background: Pink;
position: absolute; right: -2px; width: 20px; top: -24px;
font-family: Sans-Serif; font-weight: bold;
height: 20px; padding-top: 2px; z-index:1; cursor:pointer;'
title='Delete selected records' onclick='alert(\"Not implemented\");'>
X
</div>";
I solved the problem by changing "overflow:auto" to "overflow:visible" in the ".ob" CSS for the main rectangle. I'm a bit confused because the four 'buttons' are now sitting nicely on top of the main rectangle (which I want) but when I specify a fixed height for the rectangle the content still scrolls (which I also want, but doesn't seem to fit the "overflow:visible" specification. So it's working, but I don't entirely understand why.
Related
Can someone please help me how to overlay my globe logo over my blue horizontal bar? Thanks! I have attached a photo of how it looks. I do not want to lose the positioning or anything.
CSS
.logo {
display: inline-block;
width: 100px;
margin-left: 100px;
margin-top: 20px;
max-height: 100%;
}
.title {
display: inline-block;
font-size: 40px;
vertical-align: top;
margin-top: 50px;
font-family: arial;
}
#bannerTitle {
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue, steelblue, white);
}
h2 {
color: white;
padding-left: 120px;
padding-top: 11px;
font-size: 30px;
}
HTML
<img class="logo" src="img/globe.png" alt="">
<h1 class="title">The Inter<span>net</span></h1>
<div id="bannerTitle">
<h2>The World Wide Web</h2>
</div>
https://www.w3schools.com/cssref/pr_pos_z-index.asp
You need to add z-index
#bannerTitle{
background: steelblue;
height: 60px;
position: relative;
margin-top: -50px;
background: linear-gradient(steelblue,
steelblue, white);
z-index: -1;
}
It's as matti said; you need to consider the z-index variable. What z-index does is relayer elements within the same stacking context.
From your HTML markup, I can see that your <img> and <div id="bannerTitle"> are sibling elements, so they are within the same stacking context. Therefore, whoever has a higher z-index will display on top of the other.
One way to do that is to demote the "bannerTitle" div, as matti did: z-index:-1.
An alternative way is to promote the <img>: .logo { z-index:99; }.
It's good to know that z-index only applies to block elements, and img is inline by default, but you're already made it a block element with inline-block.
I created a custom tag called <bubble></bubble> and its styles can be applied using the custom type attribute.
Code:
bubble[type=normal] {
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
}
<bubble type="normal">Hello!</bubble>
The problem comes in positioning the element when placed with the div tags. First of all, the width: 50px; gets ignored unless I use Position: Absolute; which has another problem I'll describe below. Second, It partially overlays the text when <div></div> tags are used even after applying the margins on Top and Bottom.
Code with Absolute Positioning:
bubble[type=absoluteposition] {
position: absolute;
border-radius: 10px;
background-color: #5e9bff;
text-align: center;
color: white;
padding: 6px;
width: 50px;
margin-top: 10px;
margin-bottom: 10px;
}
<bubble type="absoluteposition">Hello!</bubble>
The problem here is position: absolute; acts like float: left; which I don't want to use even after using margins on top and bottom. This problem also occurs with div tags.
Demo in JSFiddle.net
If you have a solution OR You think there is a problem in my code OR You think there is an Alternative way to fix this problem OR You need more details on my Question, please Reply.
if you want to specify , height , width on above when using absolute than you may try wrap bubble tag in another div with relative position like :
<div class="some" style="
position: relative;
display: inline-block;
width: 100px;
height: 50px;
">
<bubble type="absoluteposition">Hello!</bubble>
</div>
Cheers !
I have an dynamic div displaying some information that I want to position in an exact position relative to the background of the page. For example, I want to put a number 9 let's say, over the eye of a cat. In "full" resolution, this works fine, but tying the margin-left to a pixel size, or even a percent, will cause this to break. The code for the "eye" is something like this:
.catEye {
position: absolute;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
margin-top: 100px;
margin-left: 68px;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
Here is a plunkr that displays the problem. The problem is most evident at smaller resolutions. When in "full" resolution, the "9" should be directly over the cat eye.
http://plnkr.co/edit/2uqIhBseRLo5A47JVI2F?p=preview
I am using Foundation for the block-grid setup, 5 items per row. As the image I have is a certain size, this should generally remain the same if possible.
Question: Is there a way to get the "9" to always position directly over the eye, no matter the browser resolution? In my actual work, it needs to be positioned directly over a corner piece, so movement is very noticeable.
Clarification: After thinking about it, what I'm basically asking is positioning relative to the image element, because no matter the size/placement of it, as long as the "9" is placed relative to it, it would work.
I guess you meant to have sort of background-size:cover for the cat, I don't think that is possible in that case.
Currently, the relative position is set on the element that can be larger than 200px (which is the image size), and you have center value set on the background, so that it moves. The cat eye is always staying in the same place but not the cat image.
To fix it, you can set the relative element to max-width: 200px;. Simplified demo follows.
JSFiddle Demo
.imgCat {
background: url("http://i.imgur.com/qpbY8VC.png");
max-width: 200px;
height: 200px;
position: relative;
}
.catEye {
position: absolute;
left: 75px;
top: 95px;
width: 30px;
height: 30px;
display: block;
border: 2px solid orange;
border-radius: 50%;
}
<div class="imgCat">
<span class="catEye"></span>
</div>
First thing you can use left: and top: property to position an absolute/relative img (instead of margin-left & margin-top).
Second depending on how the containing img is resizing I'd set the left: and top: property with a percentage value.
Third use relative positioning (relative to static parent - like in your scenario).
put this in your CSS and let me know if it's the desired rendering
.imgCat {
background: url('http://i.imgur.com/qpbY8VC.png') center no-repeat;
height: 200px;
}
li {
padding: 10px;
border: 1px solid #000;
}
.catEye {
position: relative;
color: #DCDCDC;
font-size: 10px;
font-weight: bold;
font-family: "helvetica-neue-bold", helvetica, sans-serif;
width: 25px;
height: 25px;
top: 50%;
left: 35%;
border: 3px solid #000000;
border-radius: 100%;
background-color: #000000;
}
BTW: actually the cat img doesn't look very responsive...
I have problem with a div below another div which has "position: absolute".
I need to make footer appear UNDER container div but now footer is appearing somewhere behind container.
Screen: (div with green background is footer)
HTML:
<div class="horni-panel">
<div class="logo">
Zhlednuto.cz
</div>
<div class="menu">
Home, about atd.
</div>
</div>
<!-- Mini pozadi -->
<div class="minipozadi">
ahoj
</div>
<!-- hlavni obsah -->
<div class="container">
Lorem ipsum dolor sit amet. x 40
</div>
CSS:
#font-face
{
font-family: Lato-Bold;
src: url(fonts/Lato-Bold.ttf);
}
body
{
font-family: Myriad Pro;
font-size: 17px;
color: #a1a8af;
background-color: #34495e;
}
.horni-panel
{
border-top: 8px solid #34495e;
position:absolute;
top:0;
left:0;
right:0;
height: 77px;
width: 100%;
background-color: #ffffff;
}
.logo
{
color: #34495e;
font-family: Lato-Bold;
font-size: 33px;
}
.minipozadi
{
height: 282px;
width: 100%;
background-image: url(img/bg.jpg);
background-size: cover;
background-repeat: no-repeat;
margin: 0 auto;
position:absolute;
top: 85px;
left:0;
right:0;
z-index:1;
text-align:center;
font-size:30px;
}
.container
{
padding: 20px;
margin: 0 auto;
border-radius: 5px;
z-index: 100;
position:absolute;
top:0;
right:0;
left:0;
margin-top:266px;
width: 70%;
background-color: #ffffff;
border-rder-radius: 5px;
}
.footer
{
margin: 0 auto;
width: 100%;
height: 480px;
background-color: green;
}
Absolutely positioned elements will be removed from the flow of the document. So the footer moves up because container is not part of that flow. You would need to either use relative positioning on both, or absolute positioning for both and set their specific top and left values.
Alternatively you could set a top margin on footer that makes it drop enough so it is positioned below the container.
You also need to look at your css. There are several redundant properties that are possibly conflicting.
body
{
font-family: arial;
font-size: 17px;
color: #a1a8af;
background-color: #34495e;
}
.horni-panel
{
border-top: 8px solid #34495e;
position:absolute;
top:0; left:0;
height: 77px; width: 100%;
background-color: #ffffff;
}
.logo
{
color: #34495e;
font-family: Lato-Bold;
font-size: 33px;
}
.minipozadi
{
height: 100px; width: 100%;
position:absolute;
background-color: blue;
top: 85px; left:0;
z-index:1;
text-align:center;
font-size:30px;
}
.container
{
padding: 20px;
border-radius: 5px;
z-index: 100;
position:relative;
margin: 0 auto;
top: 120px;
width: 70%;
background-color: #fea;
}
.footer
{
margin-top: 120px;
width: 100%;
height: 80px;
background-color: green;
}
Here in this fiddle I removed some of the redundant css and used position:relative on the container div instead of absolute. The margin-top property on the footer needs to be greater than or equal to the top property on the container in order for it to stay below it.
You can insert another blank div over your non-absolute div and give it height as has your absolute div:
<div class="absoluteDiv">
<p>something</p>
</div>
<div class="blankDiv">
//nothing here
</div>
<div class="myDiv">
<p>some text</p>
<p>Which is covering absolute div</p>
</div>
CSS:
.absoluteDiv {
position: absolute;
left: 0;
}
.myDiv {
position: relative;
width: auto;
padding: 10px;
}
Now we can use JavaScript code to get the height of absolute div and give it to our blank div:
let absoluteDivHeight = document.getElementByClassName('absoluteDiv')[0].offsetHeight;
let blankDiv = document.getElementByClassName('blankDiv')[0];
blankDiv.style.height = absoluteDivHeight + 5 + "px";
Instead of using position:relative, you can keep both of the div with absolute positioning using JavaScript, as that seems closer to what you are looking for.
What you need here is a function that will set the top property of the footer div to the exact value you need it to be.
Here's the code:
document.getElementByClassName("container").style.top = (266 + document.getElementByClassName("footer").offsetHeight) + "px";
Here's the explenation:
document.getElementByClassName().style.top is a HTML DOM method used to change properties through JavaScript, in this case the property is top.
The 266 is the amount of pixels you set for property margin-top for your container div.
The document.getElementByClassName().offsetHeight function gets the height of an element in pixels (including padding and borders).
Finally, we add "px" to the number, so that the top
property is given in pixels.
This method has its pros and cons:
Pros:
the offset is based on the height of the container div, so it is always positioned directly below the div. You can keep using not only position:absolute, but you can use this method also for position:fixed.
Cons: You must rewrite the code if you add another div that would affect the positioning of the footer. The alignment will not change if you resize the window without reloading the page (you can fix this by running the code every time the window height changes.).
Use a separate wrapper div with 100% height and wrap your container in it that way the wrapper is following the standard flow of the page, and the container can be positioned absolutely within that wrapper, let me know if you need code example.
I looked at the other questions to this topic but the answers doesn't help me.
It's a little bit hard to explain but i'll try. So I have a footer:
#fußzeile{
width: 100%;
background-color: #e9e8e5;
padding-top: 14px;
padding-bottom: 14px;
bottom: 0;
padding-left: 24px;
height: 36px;
text-align: center;
}
I tried overflow: hidden, height: 100% etc.
I used margin-top to push the wrapper down then it works but if I minimize the site the gap is back again.. Position: absolute/relative doesn't work also..
Try using the following in your css:
#fußzeile{
position: fixed;
bottom: 0px;
}
Try this:
#fußzeile{
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
background-color: #e9e8e5;
padding-top: 14px;
padding-bottom: 14px;
padding-left: 24px;
height: 36px;
text-align: center;
}
Here is a working demo.
position: absolute;
width: 100%;
this corrected it for me with 2 added lines of code.
This happens when there is no content above the footer. You can try this Move the footer div outside any container (if it is contained in a container, make sure its a direct child to the html) and then make the POSITION : absolute;