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/
Related
I am having trouble figuring out why an element will not stay fixed relative to it's parent in Vue. It's only relative to #app. How can I get a child element to be 100% of it's parent in Vue with a position of fixed.
HTML:
<div id="app">
<div class="parent_relative">
<div class="child_fixed"></div>
</div>
</div>
CSS:
.parent_relative{
position: relative;
width: 500px;
height: 20px;
border: 1px solid green;
}
.child_fixed{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 20px;
background-color: blue;
}
The picture below is what it looks like:
The search bar has a div around it with position fixed. It should not be on the top of the browser. It should be within the dark div that you see below it.
An element with position: fixed; is relative to the viewport, not the parent. Maybe, what you're searching for is position: absolute; which is relative to it's parent.
html code
<body>
<div id="container">
<div id="left">
<h2>rerererere</h2>
</div>
<div id="right">
<h2>sdadsad</h2>
</div>
</div>
</body>
CSS file
div#container {
position: relative;
border: 1px solid #000;
}
#left {
position: absolute;
width: 480px;
height: 480px;
border: 1px solid #0092ef;
/* blue*/
}
#right {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
width: 250px;
border: 1px solid #783201;
/* brown*/
}
when I only use right div as absolute than there is no problem . But when I use absolute in both left and right div. right div becomes as small as line. I am new to css . So this might be a noob question . Why if I put two absolute div under a relative div does not work ? Please help me out.
Your right <div> collapses because you haven't declared a fixed height for it in your CSS, that's all.
Your right div has no height.
Here is a jsfiddle with your right div with a height
Your right div has no height specified which is why it collapses to the line height.
Plus remove bottom: 10px; on the right div as this is redundant as there is a top value already specified.
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;
}
I have a wrapper with border radius. Inside the wrapper I have a absolute positioned image in the top right corner. My problem is that the image doesn't crop/hide under the wrapper with border radius. I've tried overflow:hidden on the wrapper but it doesn't work. See image below.
Image tag is not affected by border-radius.
Your best bet is to use the picture as a background like:
<div id="someimage" style="background:url('image.jpg');border-radius: 5px; height: 200px; width: 500px;"></div>
The element(in above example a div) should contain the size of the actual image), and unless you use CSS3, the image cannot be resized like <img> tag
You could use a separate absolutely positioned <div> for the border so that you can place the border above your absolutely positioned image. For example:
<div id="wrapper">
<div id="inner">
<img id="i" width="75" height="75" src="http://placekitten.com/75/75">
</div>
<div id="border"></div>
</div>
And some CSS (WebKit border radius properties only, the rest are left as an exercise for the reader):
#wrapper {
position: relative;
}
#inner {
margin: 2px; /* Make room for the border */
width: 200px;
height: 200px;
position: relative;
}
#border {
-webkit-border-radius: 5px;
border: 2px solid black;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#i {
position: absolute;
top: 0;
right: 0;
}
And the usual example: http://jsfiddle.net/ambiguous/6e622/
The <div id="border"> is certainly a hack (and I feel a bit dirty for coming up with it) but maybe it will work for you.
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.