I have an image to which I need to glue an input field. There will be several input fields and each of them should always be in its place, namely on a certain part of the image.
.input-circle {
border-radius: 50%;
width: 70px;
height: 70px;
}
<img class="figure-img img-fluid rounded" src="123.png"/>
<input class="form-control input-circle">
I need to do as shown in gif
perfect result
how can i bind input fields to image like that?
Or maybe I need to use a completely different concept?
Thanks in advance for your help!
Use position relative and absolute to achieve this. A little example:
.body_wrapper {
position: relative;
height: 100%;
width: 100%;
}
.input_wrapper {
position: absolute;
border-radius: 50%;
width: 70px;
height: 70px;
overflow: hidden;
top: 100px;
left: 100px;
}
.input_wrapper .input-circle{
height: 100%;
}
<div class="body_wrapper">
<div class="image_wrapper">
<img src="https://cdn.britannica.com/s:800x450,c:crop/96/177096-138-2CB46AEC/discussion-organ-systems-human-body-another-influence.jpg" alt="">
</div>
<div class="input_wrapper">
<input class="form-control input-circle">
</div>
</div>
Working fiddle
Related
<div class="curbaT">
<img src="avertizare/1.png" class="img" >
<p class="p1">Curba la stanga </p>
</div>
.img{
left: 10px;
height: 100px;
width: 120px;
margin-top: auto;
margin-bottom: auto;
position: absolute;
}
I have several such divs (multiple classes "curbaT") and I want the image of the 2th, 6th, 7th, 15th and 22th div to be 150 wide.
I don't know javascript, just html and css, but this is what i would like to do using a script. From what I understood, you can select anything and change the respective characteristics. Thx!
Use the :nth-child(n) selector. Reference here.
.curbaT:nth-child(1) img,
.curbaT:nth-child(3) img {
width: 150px;
height: 30px;
}
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
<div class="curbaT"><img src="http://placekitten.com/100/30" /></div>
Basically, I have a page that should load 3 pngs when you press the button. The problem I'm having is that I have one image #heart that I want to overlay onto a #background. I've tried different permutations of positioning but it (the #heart image) won't move at all, even with a high z-index over the lower layer. It won't even move to the right with left: x px
Sorry. I'm still pretty new. I'm completely stuck as to how to proceed. Developer tools just tell me that it's sitting in an image div above where I want it to be... Here's the code:
#heart {
z-index: 99999;
left: 200px;
top: 100px;
height: 100px;
width: 100px;
position: relative;
}
#background {
width: 800px;
margin: 0 auto;
display: none;
z-index: -10;
position: relative;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
To make this you will have to use some others css properties like flex and background-image and update you HTML DOM just like this:
#heart {
height: 100px;
width: 100px;
}
#background {
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height: 500px;
background-image: url("https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png");
background-size: cover;
background-position: center;
position: relative;
}
<div class="action">
<div id="background">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
</div>
</div>
When you give an element "position: relative", it keeps it's place in the document flow, so when you change it's position on the page with top: 100px or whatever, it moves but the space it vacates is not removed from the document. Therefore, nothing moves in to take it's place and z-index does nothing.
Try this:
<div class="action">
// Switch the two images in the document flow to make this easier, although you can ignore that if you want.
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<div id="bennyNormal"></div>
</div>
So now, #heart is no longer "below" the #background image in the document flow. bennyNormal div is still "above" everything inside the #action div but because the #background image comes first (with a relative position (or even if it had no position) #background will keep the div below it on the page in the doc flow. If you also give #background display: block it will stop the div from moving up, if that ever becomes an issue.
Then:
#heart {
z-index: 99999; <== this is irrelevant now. get rid of it.
left: 200px; <== change these to position over #background as you wish
top: 100px;
height: 100px;
width: 100px;
position: absolute; <== important bit.
}
#background {
width: 800px;
margin: 0 auto;
display: none; <== You want it invisible? Should be block.
z-index: -10; <= Same with this. Don't screw around with z-index if you can avoid it.
position: relative; <== This no longer matters, but you can still include it
}
As nitin9nair comment, setting #heart { position: absolute; } seems to be enough
#heart {
position: absolute;
top:200px;
left:320px;
}
<div class="action">
<img id="heart" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561725918/virtual%20pet/l1.png" alt="heart points image">
<img id="background" src="https://res.cloudinary.com/dytmcam8b/image/upload/v1561670551/virtual%20pet/little-board.png" alt="pin board image">
<div id="bennyNormal"></div>
</div>
So not sure if this one is possible but from my understanding of the spec the parent of a position fixed element should be the viewport not a parent element with position relative.
That obviously all works when it comes to positioning but not with z-index.
If you take a look at this example,
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 2;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
https://codepen.io/anon/pen/mmvXaE
The fixed element goes behind the black section if you scroll down, what I need is a way to get the red element to the front without moving it out of el-one.
I have a project where some embed code needs to become fixed when you scroll past it, this is a better example of the actual code. The example above just highlights the issue in a simple way:
<div class="parent">
<div class="el-one">
<div id="my-wrapper">
<iframe class="im-fixed"></iframe>
</div>
</div>
<div class="el-two"></div>
</div>
,
I found this online talking about what I believe has caused the issue: https://developers.google.com/web/updates/2012/09/Stacking-Changes-Coming-to-position-fixed-elements but no luck finding a workaround.
All I can think of is using JS to move the element from where an editor puts the embed code and prepending it to the body when the user scrolls past the element.
Anyone else come across this or have any ideas?
You want something like this? Increase the z-index of .el-one higher than the one you want to overlap
.parent {
height: 1000px;
}
.el-one {
position: relative;
z-index: 99;
height: 100px;
width: 100%;
color: red;
}
.el-two {
position: relative;
z-index: 2;
background-color: black;
height: 500px;
width: 100%;
}
.im-fixed {
position: fixed;
top: 0;
left: 0;
}
<div class="parent">
<div class="el-one">
<div class="im-fixed">Hello</div>
</div>
<div class="el-two"></div>
</div>
Use the following:
.el-two {
position: relative;
z-index: -1;
background-color: black;
height: 500px;
width: 100%;
}
There are several ways to solve this issue. Increasing Z-Index, cleaning up the div and etc.
I think you are sort of trying sticky header functionality. There is a new value for position CSS attribute.
position: sticky
I have cleaned up the code and removed all Z-Index. Please check the attached code snippet.
Note: Supported only in Chrome, Firefox
Not supported in IE.
.parent {
background-color: green;
position: relative;
width: 100%;
height: 5000px;
}
.header {
position: sticky;
top: 0px;
left: 0px;
height: 50px;
background-color: yellow;
}
.el-one {
background-color: blue;
color: white;
height: 100px;
width: 100%;
}
.el-two {
background-color: orange;
height: 500px;
width: 100%;
}
<div class="parent">
<div class="header">I am a header</div>
<div class="container">
<div class="el-one">
I am el-one
</div>
<div class="el-two">
I am el-two
</div>
</div>
</div>
I have a container div with an image overlayed on top of it.
I want to center this container div within a basic popin. I am sure it has something to do with the overlay approach I am using within the CSS, but I cannot figure it out. How can I center the container dev within the popin?
EDIT: There are several of these blocks placed in-line.
CSS and HTML are as follows:
.containerdiv { float: left; position: relative; }
.cornerimage { position: absolute; top: 0; left: 0; }
.popin{
background:#fff;
padding:15px;
box-shadow: 0 0 20px #999;
border-radius:2px;
}
#underlay1 {
width: 320px;
height: 320px;
position: relative;
}
#underlay2 {
width: 320px;
height: 320px;
position: relative;
}
<div class="row">
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay1"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
<div class="col-md-4 col-sm-6 popin">
<div class="containerdiv">
<div id="underlay2"></div>
<img class="cornerimage" border="0" src="http://lorempixel.com/320/320" alt="">
</div>
</div>
</div>
Underlay is receiving an image from an API. overlayimage.gif is another image being placed on top.
Just remove float: left; from .containerdiv and give text-align: center; to .popin will solve your issue.
You can center absolute div like following way:
left: 50%;
transform: translate(-50%, 0px);
http://jsfiddle.net/5z2k1b1r/
Edit:
use margin: 0 auto; for #underlay as per your expected output.
Check Fiddle
So I've been playing around with this for a while, but cannot get the binded click event to fire from a jqzoomed element.
HTML:
<div class="product-clicktozoom-image">
<div class="product-clicktozoom-image-main">
<img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/>
</div>
</div>
JS:
jQuery(document).load(function() {
jQuery('#mainimage').bind('click',function(){
var fancyImage = jQuery('#mainimage').attr('src');
jQuery.fancybox.open(fancyImage);
});
});
jqzoom creates a couple of extra div's so the final page structure actually looks like this:
<div class="product-clicktozoom-image-main">
<a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;">
<div class="zoomPad">
<img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;">
<div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div>
<div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;">
<div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;">
<div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div>
<div class="zoomWrapperImage" style="width: 100%; height: 355px;">
<img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;">
</div>
</div>
</div>
<div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div>
</div>
</a>
</div>
I have tried binding the click event to the #mainimage, along with the zoomPad class and also the img within the zoomWrapperImage element as this appears to be the top element when you mouseover the image.
All I want to do is open the full image in a fancybox if they click on the zoom (currently the zoom happens on mouseover). I know the fancybox.open(fancyImage); works, I can run the code in the click function directly in the console successfully, I just can't get it to fire from the click event itself.
Help!
This turned out to be pretty simple in the end, the click event needs to bind on the .zoomPad, and I used window.load in place of (document).ready as that ensures all the elements have loaded.
Final JS:
jQuery(window).load(function() {
jQuery('.zoomPad').bind('click',function(){
var fancyImage = jQuery('.zoomWrapperImage img').attr('src');
jQuery.fancybox.open([{href : fancyImage}], {closeClick : true});
});
});