We Keep Coding

Set coordinates of element in DIV with js, css, html

im working on some graphic representation of journal issues. What I need is to display block of text using simple DIVs (or else) inside of other DIV, exactly the way they are organized on issue page. To do that I need to set coordinates of DIV element to exact number, but in relation to parent DIV. Is there any way to do that by using css or js??

If you outer div is set to position: relative, you can have the inside div as position: absolute and set its top, left, right and bottom properties to the pixels you need. For example.
.outer {
position: relative;
}
.inner {
position: absolute;
top: 10px; //your coordinate
left: 5px; //your coordinate
}
<div class="outer">
<div class="inner">Your content</div>
</div>
Otherwise, you can simply use padding on the inner element.

If you want the div to be display: block;, you can use simple margin-top and margin-left to set coordinates.
Lets say (for example) you need to set the coordinates of the div as <100,50>:
To do that, in CSS, set margin-left: 100px and margin-top: 50px

How to override position : absolute in css?

I have a menu on top of my page, and after that a div tag that uses a class as below:
<div class="a">
Hello!
</div>
a is a general class that has position: absolute; in style.
I want to disable this absolute; since the div content not shown completely. So I decided to use another class that overrides the position setting.
<div class="a overridden-a">
What should I set for position: in .overridden-a{ position: ???? !important } in my other style?
Update: I don't want to edit the a class styles, It is common and general in project.

The default value of position is static.
The use of !important is not best practice and should be avoided where possible. Instead, to override a CSS rule you need to use a selector of a higher specificity. Try this:
.a.overridden-a {
position: static;
}
position: relative; would achieve what you require as well.

What you set it to instead depends on how you want to display it instead. There are 4 possible values (including absolute, which you're trying to override).
From http://www.w3schools.com/css/css_positioning.asp:
position: static; An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page. This is the default.
position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
position: fixed; An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
position: absolute; An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

Well, by default it is static, so you could set it to static.
Either by adding style="position:static" or doing it with css, after .a declaration:
.overriden-a{
position:static;
}

The default value of position is position: static, so this will probably work:
.overridden-a {
position: static;
}

You could always use inline-css with !important. This will override any other stylings as the priority will be first.
<div class="a" style="position: static !important">
Hello!
</div>

.overridden-a {
position: static;
}
Should do it but only if you put it after declaration of your a class. !important is usually used not so often if your css file is structured good. On the other hand it is used to overwrite any css rule in your file no matter of position where is declared at. In another words it stands out for css rules of specificity.

Positioning div to the right with an undefined width

I'm going to have trouble explaining what I mean but bear with me. First here's my fiddle https://jsfiddle.net/jmajnqej/5/ (updated by Aziz)
#freelancewrapper {
width: 100%;
max-width: 1000px;
height: 440px;
background-color: #9D9D9D;
position: absolute;
}
I'm trying to get freelancewrapper to hug the right side of the screen with no padding. It needs to stay connected to the very right side of the screen no matter what width the window is. To make it more complicated it's parent div contentwrapper has to stay where it is with the same width and margins.
here is a representation of two screen sizes to show what I mean. http://imgur.com/a/IkOwx
Update: I didn't realize it at the time but this is a two part question. Positioning it was easy but getting the right correct width property is not. Here's my question for that Trouble defining width of a responsive div.

All you have to do is add the following CSS properties to your element:
position: absolute;
right:0;
jsFiddle fork
If you want the div to remain attached to the screen when scrolling, you can replace absolute with fixed.
Keep in mind that position: absolute works relative to the first parent tag with a position:relative. by default, that tag would be the body.
Also an important thing to keep in mind is that when an element is absolutely positioned, it will lose its space in the layout and hover over all elements.

I can't tell you the exact value you should need to achieve the desired result. What i would advice for trying to make your styling "responsive" is to start 1. from a mobile first approach(easier to up the screen size then downsizing).
To further answer your question try using relative units. your width for example is 100% this is relative. But instead of pixels try using em.
every ~16 px(not precise) is 1.0 em.
furthermore you can use position: absolute;
good luck further.

Like Paulie_D said you can use position
CSS
.contentwrapper {
width: calc(100% - 190px);
max-width: 1160px;
margin-top: 50px;
margin-left: 40px;
position: absolute;
right:0;
}
DEMO HERE

you can use negative right margin on <div class='contentwrapper'>
.contentwrapper{
margin-right: -48px;
}
https://jsfiddle.net/linkers/jmajnqej/3/

what position property should be assigned to "container" element and "animation" element? html css javascript

I saw this example from w3schools.com. The website says that
The container element should be created with style = "position: relative".
The animation element should be created with style = "position: absolute".
I don't understand why this is the case. Could someone please kindly explain it to me.
<!Doctype html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>
<h1>My First JavaScript Animation</h1>
<div id="container">
<div id="animate"></div>
</div>
</body>
</html>

By setting position: absolute on an element it is removed from the documents' normal rendering flow and it is rendered exactly where you tell it. Any positioning rule you set on this element (left, right, top, bottom) will be calculated using as reference the closest ancestor with position:relative if any is set or the body element.
If you need to broaden your understanding of CSS positioning fast, I recommend this tutorial.

The whole point of position: absolute is to position it BASED on the parent element.
The only way this can be achieved is through the use of position: relative on the parent element.
Since the default position-value is position: static the absolutely positioned element can not be based on that.
If there is no parent element with a position: relative the position: absolute element will position itself according to the html.
Here's a great post about the different position values on CSS-Tricks:
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Quote from the css-tricks post on position: relative:
Remember that these values will be relative to the next parent element with relative (or absolute) positioning. If there is no such parent, it will default all the way back up to the <html> element itself meaning it will be placed relatively to the page itself.

div always sticking to the left border of the page

I've got a <div id="mydiv"> with margin-left: 0px.
But sometimes (the page is dynamically generated) that this <div> is placed within another <div> that has a positive margin-left value.
This way #mydiv will have the margin of the container and not 0.
Is there a way to set
margin-left: 0px (relative to the body margin)
or
margin-left: -(sum of container margins)?

If your div is inside another one, the boundaries for that div are limited to it's container div.
You can break out of it by putting position: absolute; on the div you want to position differently. Then you should put a position: relative; on the container it should be relatively positioned to. Then you can use a negative margin-left.

use:
.mydiv{
position: absolute;
left : 0;
}
By using an absolute position and setting left to 0 your div will always be aligned with the left side of the containing element with no margin.

Use CSS positioning property and align the div's respectively.
For Example
You have a <div class="wrapper"> style this with position:relative
And for the inside <div class="mydiv"> style with position: absolute; left: 0; or left: 50%.

The main point is positioning:
position: fixed; will position the div relative to the browser window
position: relative; will position it relative to its normal position
position: absolute; will position it relative to the first parent element that has a position other than static (so it is not really absolute after all)
check http://www.w3schools.com/css/css_positioning.asp

You can achieve it with positions like relative and absolute.
You just need one top parent above all div.
I have created following example. It will help you to achieve what you need.
[Example](http://jsfiddle.net/dhavalsolanki/tjv5e1tn/)