We Keep Coding

How do I create an HTML element that remains on the page and is unaffected by scroll?

I want to create a button that remains on the screen, no matter how much we scroll through the page, like the button is stuck on the display. Is there a way to do this?

absolute
Indicates that the element is absolutely positioned, while other elements are displayed on the web page as if there was absolutely no positioned element. The position of the element is set by the left, top, right, and bottom properties, and the position property of the parent element also affects the position. So, if the parent value of position is set to static or there is no parent, then the coordinates are counted from the edge of the browser window. If the parent's position value is set to fixed, relative or absolute, then the coordinates are counted from the edge of the parent element.
fixed
In its effect, this value is close to absolute, but unlike it, it is tied to the point indicated on the left, top, right, and bottom properties of the screen and does not change its position when scrolling through a web page. The Firefox browser does not display scrollbars at all if the position of the element is fixed and it does not fit entirely into the browser window. Although Opera bars show scrollbars, they do not affect the position of an element.
relative
The position of the element is set relative to its original location. Adding the left, top, right, and bottom properties changes the position of the element and shifts it in one direction or another from the original location.
static
Items are displayed as usual. Using the left, top, right, and bottom properties does not produce any results.
inherit
Inherits the meaning of the parent.
In your case, 'fixed' should work
HTML:
<div class="fix_block">Fixed block</div>
CSS:
.fix_block {
position: fixed;
top: 100px;
left: 30px;
padding: 20px;
border: 1px solid #000;
}

Use position:fixed; on the element. You can then set its location by setting some combination of top, right, bottom, or left.

You can use CSS position property to achieve this, in you case the property you need is position:fixed;
Using this property you can position an element relative to the view port of the browser, and it will always stay in the same place even if the page is scrolled.
So simply put if you have a html element which you want to fix position for just
select it in css and give it position:fixed; and respective left, right, top, bottom values to align it.
HTML
<div class="fixed_div">I am fixed!</div>
CSS
.fixed_div {
position: fixed;
top: 40%;
left: 40%;
padding: 10px;
border: 2px solid red;
}
Hope it helps !

Use the FIXED position
for example: when you have a
<div class:"fixed-btn"> Fixed button </div>
Your Css Should be like:
.fixed-btn{
Position:fixed;
top:100px;
left:0px;
baground:#fff;
padding:5px;
}
Try it..

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

Separating two select boxes on same row equally in CSS

I have a container that is a certain width.
I have two select elements rendering on the same line in this main div container. The first one is absolute positioned 40px left from the main div container and the right one is absolute positioned 40px right from the main div container. Thus, resulting in a centered container within the main div container.
My goal is to push two select elements into the resulting container that sit on either side of either, having the same width, and having a space equidistant in the middle.
Here is my current HTML:
<div id="container">
<select class="edit" style="left: 40px; top: 290px; width: 136px;"></select>
<select class="edit" style="left: 190px; right:40px; top: 290px; width: 136px"></select>
</div>
So in this one we are assuming that the left has a combined pixel count of 40+136=176px, width plus left positioning and the right having a pixel count of 190+136+40=366, left positioning plus width plus right;
the result would be a container having two equidistant select boxes within the constraints of 40px each way.
I'm not sure if my math is correct but any assistance with this would be greatly appreciated.

Try removing the left:190px from the right hand element. The right:40px is enough to position the element to the right.

I'm not sure if this is exactly what you're looking for, so let me know if I've misunderstood something, but what about this solution (note that .edit could just as easily have a strictly %-based width, I just wanted to show how flexible this solution could be):
https://jsfiddle.net/Lcn51a1p/
HTML:
<div class="container">
<select class="edit"></select>
<select class="edit pull-right"></select>
</div>
CSS:
.container {
margin: 0 40px;
}
.edit {
width: 120px;
max-width: 50%;
}
.pull-right {
float:right;
}

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/)

position relative-absolute child margin bug?

Can anyone explain how I can prevent the margin of a sibling div from affecting the other one? It does not logically make sense to me why the browser is laying it out this way.
I am trying to get the yellow box to have it's top/left relative to the parent, but the blue box with a margin-top is affecting the yellow one.
http://jsfiddle.net/oufdfoLy/
section{
position: relative;
}
div.options{
position: absolute;
left: 10px;
top: 10px;
display: inline-block;
background: #ff0;
padding: 50px;
}
div.content{
height: 100px;
width: 100%;
background: #09c;
margin-top: 50px;
}
<article>
<section>
<div class='options'>
</div>
<div class='content'>
<h1>hello world</h1>
</div>
</section>
</article>

This is known as collapsing margins.
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
One solution would be to set the overflow property of the parent element to something other than the default value, visible.
Values such as auto or hidden would produce the expect results.
(See the link above for alternative approaches to work around this.)
Updated Example
section {
position: relative;
overflow: auto;
}
Changing the overflow property's value establishes a new block formatting context.
9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.