I'm trying to add a callout bubble to the right of some form fields using HTML and CSS. I don't want the callout effecting any other layout so I've got it positioned absolutely, but I'd like to somehow position it a certain distance to the right of another element.
This is basically what I have:
<ul>
<dt><label>...</label></dt>
<dd>
<input ...>
<span class='callout'>Helpful tip about this field</span>
</dd>
</ul>
And:
.callout {
position: absolute;
}
So I want the .callout out of the layout flow (hence position:absolute, but I want it positioned just to the right of the input field it's associated with (without knowing the width of the field in advance, of course).
Any ideas?
You're going to want to position it absolutely relative to your element. So, set your container to position: relative and your callout to position: absolute. Top/left then becomes the top left of the parent element. Make sense?
Here's a fiddle to illustrate the concept:
http://jsfiddle.net/tNCDK/
HTML:
<div id="parent">
<div id="child"></div>
</div>
CSS:
#parent {
position: relative;
border: solid 1px #000;
width: 200px;
height: 200px;
}
#child {
position: absolute;
top: 10px;
right: -50px;
border: solid 1px #000;
width: 50px;
height: 50px;
}
Related
As you can see from the example below, .absolute_child is positioned relative to .relative_parent's padding box. How can I position it at the top of .relative_parent's content box instead? I'm willing to add extra elements (e.g. nested divs) to the HTML, as that generally seems to be what I wind up having to do for more fiddly layouts!
.relative_parent {
position: relative;
height: 100px;
padding: 30px;
background-color: green;
}
.absolute_child {
position: absolute;
top: 0px;
height: 10px;
width: 10px;
background-color: blue;
}
<div class="relative_parent">
Content box of parent starts here
<div class="absolute_child">
</div>
</div>
Eg. how can you get the blue child in this example to be horizontally centered relative to the viewport (ie. in the center of the page), provided that the parent must stay the same.
Other qualifications:
I don't want it to be fixed.
Suppose that distance between the parent and the left viewport is unknown.
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: absolute;
bottom: 100%;
}
<div class="parent">
<div class="child">
child
</div>
</div>
I am trying to make this question a SSCCE. In reality, the use case is that I have a dropup (like dropdown, expect it appears above rather than below the triggering button). I want the dropup menu to be centered.
The menu needs to be absolutely positioned, otherwise it'd get in the way of the flow of other DOM elements. And I need to position the container so that I could set bottom: 100%; on the menu so that it appears right above the triggering button.
In in this case you can use position:fixed BUT to avoid it being fixed apply a null transform to the body:
body {
transform:translate(0,0);
min-height:150vh;
}
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: fixed;
left:50%;
transform:translate(-50%,-100%);
}
<div class="parent">
<div class="child">
child
</div>
</div>
Is there a way to position an element relative to an img tag?
Of course I can make this image inside a div, and then position the element relative to this div. But let's say the image is already positioned, and i don't want to add other elements.
Here's a sample: http://jsfiddle.net/bortao/MQf3D/
The blue div should go on the left top corner of the image (0px/0px)
HTML
<img class="im" />
<div class="di">Absolute</div>
CSS
.im {
position: relative;
left: 20px;
top: 60px;
}
.di {
position: absolute;
left: 0px;
top: 0px;
border: solid 1px blue;
}
You can actually use the image's class as the parent div of the image and the text:
<div class="outer">
<div class="im">
<img src="http://placekitten.com/200/300">
<div class="di">Absolute</div>
</div>
</div>
Fiddle: http://jsfiddle.net/MQf3D/2/
is there a way to absolute position an inner div to the top of the page ignoring parents relative position?
Nope, unless you re-locate it in the DOM.
(using position:fixed might be an alternative if you want it to be window related instead of document related)
You can use position: absolute; and negative values:
HTML:
<div id="parent">
<div id="child">
The child's content
</div>
</div>
CSS:
#parent
{
position: relative;
top: 200px;
border: 1px dashed #f00;
height: 50px;
width: 200px;
}
#child
{
position: absolute;
top: -200px;
}
This should do it. Example for you here.
I have 3 levels of div:
(In green below) A top level div with overflow: hidden. This is because I want some content (not shown here) inside that box to cropped if it exceeds the size of the box.
(In red below) Inside this, I have div with position: relative. The only use for this is for the next level.
(In blue below) Finally a div I take out of the flow with position: absolute but that I want positioned relative to the red div (not to the page).
I'd like to have the blue box be taken out of the flow and expand beyond the green box, but be positioned relative to the red box as in:
However, with the code below, I get:
And removing the position: relative on the red box, now the blue box is allowed to get out of the green box, but is not positioned anymore relative to the red box:
Is there a way to:
Keep the overflow: hidden on the green box.
Have the blue box expand beyond the green box and be positioned relative to red box?
The full source:
#d1 {
overflow: hidden;
background: #efe;
padding: 5px;
width: 125px;
}
#d2 {
position: relative;
background: #fee;
padding: 2px;
width: 100px;
height: 100px;
}
#d3 {
position: absolute;
top: 10px;
background: #eef;
padding: 2px;
width: 75px;
height: 150px;
}
<br/><br/><br/>
<div id="d1" >
<div id="d2" >
<div id="d3"></div>
</div>
</div>
A trick that works is to position box #2 with position: absolute instead of position: relative. We usually put a position: relative on an outer box (here box #2) when we want an inner box (here box #3) with position: absolute to be positioned relative to the outer box. But remember: for box #3 to be positioned relative to box #2, box #2 just need to be positioned. With this change, we get:
And here is the full code with this change:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Positioning */
#box1 { overflow: hidden }
#box2 { position: absolute }
#box3 { position: absolute; top: 10px }
/* Styling */
#box1 { background: #efe; padding: 5px; width: 125px }
#box2 { background: #fee; padding: 2px; width: 100px; height: 100px }
#box3 { background: #eef; padding: 2px; width: 75px; height: 150px }
</style>
</head>
<body>
<br/><br/><br/>
<div id="box1">
<div id="box2">
<div id="box3"/>
</div>
</div>
</body>
</html>
There's no magical solution of displaying something outside an overflow hidden container.
A similar effect can be achieved by having an absolute positioned div that matches the size of its parent by positioning it inside your current relative container (the div you don't wish to clip should be outside this div):
#1 .mask {
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
overflow: hidden;
}
Take in mind that if you only have to clip content on the x axis (which appears to be your case, as you only have set the div's width), you can use overflow-x: hidden.
I don't really see a way to do this as-is. I think you might need to remove the overflow:hidden from div#1 and add another div within div#1 (ie as a sibling to div#2) to hold your unspecified 'content' and add the overflow:hidden to that instead. I don't think that overflow can be (or should be able to be) over-ridden.
If there is other content not being shown inside the outer-div (the green box), why not have that content wrapped inside another div, let's call it "content". Have overflow hidden on this new inner-div, but keep overflow visible on the green box.
The only catch is that you will then have to mess around to make sure that the content div doesn't interfere with the positioning of the red box, but it sounds like you should be able to fix that with little headache.
<div id="1" background: #efe; padding: 5px; width: 125px">
<div id="content" style="overflow: hidden;">
</div>
<div id="2" style="position: relative; background: #fee; padding: 2px; width: 100px; height: 100px">
<div id="3" style="position: absolute; top: 10px; background: #eef; padding: 2px; width: 75px; height: 150px"/>
</div>
</div>