Develop Reference

Position a div near another div using absolute positioning

What I am trying to achieve is a tooltip like positioning of an element that's inside the same contain as the element that when clicked will display a div that contains a table.
The full code can be found here:
http://jsbin.com/xihebol
When somebody clicks on .child-table-link the .child-data-table-container is supposed to be positioned relative to the clicked link.
I am doing this inside the click handler of the .child-table-link:
var _this = $(this);
$(".child-data-table-container").css({
"left": _this.offset().left - ($(this).width / 2),
"top": _this.offset().top
})
top works but left doesn't. How I do make it work? In general way to position an element relative to another element in the view-port is what I am looking for.

The problem is you are calculating the left position wrong, "left" will be the position of the left edge of the tooltip container, so if you want it to sit just to the left of your link, it only needs to be set to the negative width of the tooltip container. Check this out:
.canvas {
display: flex;
align-items: center;
justify-content: center;
}
.linkContainer {
position: relative;
background: #000;
}
.tooltip {
position: absolute;
width: 100px;
height: 100px;
background: green;
top: 0;
left: -100px;
}
<div class='canvas'>
<div class='linkContainer'>
<a href='#'>LINK</a>
<div class='tooltip'></div>
</div>
</div>
Notice how the tooltip width is 100px, and the left is set to -100px.

How do I use CSS to alter the colour of my logo when I scroll onto a different background colour

I currently have a white SVG logo that I am using as my website is mostly dark backgrounds. However, I do have a section that is white so I am looking to change the colour of the logo to black while scrolling through the white section.
Here is a copy of the logo code and white section:
<!-- Logo -->
<div class="logo" style="display: block;">
</div>
<!-- About -->
<div class="scrollview about">
<div class="col-sm-3">
</div>
</div>
Here is my current styles:
.logo {
position: fixed;
top: 0;
left: 0;
margin: 20px;
padding: 2.8em 2.8em;
z-index: 9;
}
.logo a {
width: 95px;
height: 16px;
display: block !important;
background-image: url('../img/logo-light.png') transparent 0 0 no-repeat;
background-image: none,url('../img/logo-light.svg');
}
.about {
padding: 12.25em 10.25em;
margin: 0;
overflow: hidden;
background: #fff;
width: 100%;
height: auto;
z-index: 3;
}
I'm not sure if it can be done using only CSS, but if someone can even point me towards a plugin or script it would be much appreciated.
Thanks

You can't use CSS like that to change the style of an SVG that's in a separate file. CSS rules do not cross document boundaries.
To style the SVG, you would need to need to inline it in your HTML page.
Assuming you made that change, then you could add a scroll event handler to the page and watch the position of the logo. If you detect it is at the right point on the page (ie. it is over the white section), then you could add a class to it (or the <a> or the <div>). The class would change the colour of the logo using fill: black, or whatever.
Have you considered an easier solution? Such as giving the logo a dark outline, so that it stands out when over the white background?

The fill property in CSS is for filling in the color of a SVGs.
svg {
fill: currentColor;
}
But you can't change the color of your logo for specific section of your site.

i check your demo link and I found out that they are use jquery to add and remove css class from there logo.
So you need add jquery 2.3.+
get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();
Now on scroll add function
$(window).on('scroll',function()
and in it just add
stop = Math.round($(window).scrollTop());
if (stop > mainbottom) {
$('.logo').addClass('logo-dark');
} else {
$('.logo').removeClass('logo-dark');
}
Here's demo on codepen I made for you hope this will help you.

On second click, element gets moved to the edge of screen

I have a div that after I click an element(button1), expands its height. I then have another button appear which allows you to shrink the div(button2). After I click button1, the div expands and button2 shows at the bottom. I can then click button2 to shrink the div back to normal, but if I expand the div again, button2 is now off the edge of the screen, albeit in the same bottom location, just far left rather than centered.
I had to set the margin on button2 to -25px since the absolute positioning was kicking it off-center. And I need to use absolute positioning since it seemed it was only way to get the button to appear at the bottom of div after it had expanded.
$(".button1").on("click", function(){
$(".button1" ).fadeOut(200);
$("#block3").animate({
height: '800px'
}, 600, function() {
$(".button2").fadeIn(200);
});
});
$(".button2").on("click", function(){
$(".button2").fadeOut(200);
$("#block3").animate({
height: '400px'
}, 600,function(){
$(".button1" ).fadeIn(200);
});
});
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: 25px;
}
.button1{
width: 50px;
height: 50px;
margin-top: 25px;
image-rendering: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class = "col-md-12" id = "block3">
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll.png" class = "button1" />
<img src="https://placehold.it/120x80/00aaaa/fff/?text=scroll1.png" class = "button2" />
</div>
</div>
Uploaded the code.
https://jsfiddle.net/bs9xhe5e/2/

On the second click it changed the inline styling to display:block instead of display:inline, if you just add the display:inline into your jQuery it works;
https://jsfiddle.net/havL1z3m/
Added
$(".button2").css({display:"inline"});

The reason .button2 is showing up all the way to the left is that the absolute positioning gives it a default left of 0px.
Probably the easiest fix would be to remove absolute position, as well as the margin-left. Instead, to get .button2 to the bottom of the section, just set margin-top: 725px.
.button2{
width: 50px;
height: 50px;
display:none;
margin-top: 725px;
}
And then you will no longer need to use .css() to change bottom of .button2.
Check out this working fiddle: https://jsfiddle.net/gkpx7L15/

Change button2 styles like this:
.button2{
width: 50px;
height: 50px;
display:none;
position: absolute;
margin-left: -25px;
left:50%;//added style
}
https://jsfiddle.net/bs9xhe5e/3/
And everything will work fine
NOTE: Element will be positioned to the center of parent like this only when width is fixed like here. Example:
.someItem{
width: someWidth;//here we set some width to element
left: 50%; //Here we set position from the left
margin-left: -(somewidth/2);//here we set -half of the element's width for margin-left
}

how to fix the position of div to bottom right of div containing background image

I have html sturcture
<div id="bg" class="layer">
<img id="trackmap" src="images/back_2416.jpg" width="1208" height="768" class=" ui-draggable map-icon" usemap="#main-map" data-zoom-image="images/background_zoom.jpg" data-big="images/background_zoom.jpg" style="position: relative; left: -439px; top: -272.6px; margin: 0px; display: inline-block; height: 1327.2px; width: 2088px;">
<div id="nav-text">LOREM IPSUM.</div>
</div>
Jquery
var windowHeight = $("#trackmap").height();
var windowWidth = $("#trackmap").width();
var text_height=((windowHeight)-(100));
$("#nav-text").css("top",windowHeight);
Css
.layer {
position: absolute;
width: 1208px;
height: 768px;
}
#nav-text{
z-index: 200;
color: white;
position: absolute;
font-size: 10px;
margin-left: 715px;
width: 310px;
height: 10px;
position: fixed;
bottom: 5px;}
I just want to fix the nav-text to the bottom right whatsoever.. Now i problem i am facing is theres zoom function on the trackmap.. which increases the height and width of the image ..so the text comes in between of the image ..intereferring with the image.. I have tried taking the image width height using jquery ..but somehow its not working

I am not sure I am following your issue here, but it sounds like you are trying to get a div to be in the bottom-right of another div no matter what size it is. That can be done by setting the parent div position to relative which you have, and the child div position to absolute. You have that set but then override it by setting the position to fixed lower in the CSS. You will also want to set the bottom to 0 and the right to 0.
This will position the child div to the bottom right of the parent div. Then you can get rid of your jQuery. Hopefully this helps.

Ok.. I am in a hurry to catch the bus.. but here's a fiddle that illustrates the idea..
basically you will need to use the scrolltop and left parameters to do so:
$(".container").on("scroll", function() {
$(".nav-text").css("top", $(this).prop("scrollTop") + 130);
$(".nav-text").css("left", $(this).prop("scrollLeft") + 120);
});
but move the scrolls first.. sorry I need to go now..

You can achieve this by not fixing the .layer width and height, using display:inline-block; to prevent the div from filling the whole container width. At that point, the .layer size will match the image size whatever it is.
Finally you just need to set the text to absolute position and bottom and right properties too.
.parent{
display:inline-block;
position:relative;
}
.children{
position:absolute;
bottom:0;
right:0;
}
Here is the fiddle explaining
And here is the proof it works even if the image size is changed(click on the image).
Fiddle 2

Vertical middle alignment of image within div? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
vertical alignment of image inside a div
OK, this what I'm trying to do :
I'm having an empty div (a box), with almost no height.
I'm making an AJAX request to load some content into it.
Before loading the content, I want to display in a typical "ajax loading" rotating gif.
I've managed to :
Center the img horizontally (by putting it inside another div with text-align:center;)
What is left :
Be able to give some height to that empty div. (easy)
Vertically align the image, so that it appears on the very center of the box. (I've got absolutely no idea how to do this. I'm currently setting an upper margin, which works for one particular box, but which wouldn't work if the box already has some different height...)
How would you go about it?? (Any possible idea is acceptable. CSS/Javascript whatever...)

http://jsfiddle.net/teresko/5mG2y/
The basic idea is the use display: table-cell; and then vertical-align: middle;
the HTML
<div class="container">
<div class="holder">
<img class="stuff" src="path/to/image.png">
</div>
</div>
the CSS:
.container{
/* the container in which image is placed */
height: 300px;
margin: 0 auto;
width: 200px;
}
.holder{
display: table-cell;
width: 100%;
vertical-align: middle;
height: inherit;
}
.stuff{
display: block;
}
This way the placement of image will not depend on dimensions of container. It also can be adjusted to be in horizontal center too. All you have to do is to add .stuff{ margin: 0 auto;}.

Don't forget that table-cell is not the correct usage. You don't want images to be trated as table cells, since table cells should only contain table data.
Just raising a caution flag. Stick to the semantics.
it's better to use the answer from that other thread.
This:
#container { position: relative; }
#container img {
position: absolute;
left: 50%;
top: 50%;
margin-top: /* -1/2 the height of the image */
margin-left: /* -1/2 the width of the image */
}
Good luck!

With jQuery
//HTML
<div><img src="loader.gif" class="loader" alt="Loader" /></div>
//JS
$.fn.centeringIn = function(){
var pere = this.parent();
(pere.css("position") == 'static') ? pere.css("position","relative"):pere.css("position");
this.css({
'position' : 'absolute',
'top' : ( pere.height() - this.height() )/2+'px',
'left' : ( pere.width() - this.width() )/2+'px'
});
}
$(document).ready( function() {
$('.loader').centeringIn();
});

Add some margin-top to the image style so that it is aligned in the middle of the div. Say your div is 50px height and your image has a height of 5px. Then make your margin-top 20px to put it in the middle.