Css get element position

Complete guide to CSS positions: Element layout in CSS

When building a webpage, there can be multiple elements on our page, each with their own positions, uses, and designs. It’s important to learn how we can arrange these elements and have control over their layout.

The position property in CSS determines how an element is positioned in a document. It specifies the type of positioning method for each element.

In this tutorial, we will learn about the different position properties in CSS along with their helper properties. Along the way, I’ll show you how to use them in your own CSS code as you build your site.

We will learn:

Learn how to build websites from scratch

The perfect place to start your front-end journey. This path teaches everything you need to know about HTML, CSS, and JavaScript.

CSS position & helper properties

CSS is how we determine the layout and design of a webpage. The CSS position is how we position each element in a document. This property is a single keyword, and we attach a value to it to set the specific position of an element.

There are five main values for the position property. We will define these in detail below:

First, we set the position property. Then, the coordinates of an element is positioned using helper properties:

Before we go into these, let’s have a look at what happens if we don’t assign a position property to an element.

In the above code, we can see that we have 3 different images. But in the CSS file, we have not assigned any position properties for any element.

The images are adjusted on a vertical line, which is the default when no position property is assigned. There is also a small margin on the top and left side. That is the default 10px margin provided by the HTML element.

As we can see, there will be no gaps between the elements if we don’t provide it externally. In the CSS file, we’ve provided the margin-bottom of 10px that helps us keep a gap between the images.

So, why do we need position property?

Without setting positions, the right side of the webpage is wasted, and we cannot organize the elements. The position property allows us to use the whole webpage and organize any element how we see fit.

Now let’s take a deep dive into each of values and helper properties that we can use in our CSS code.

Enjoying the article? Scroll down to sign up for our free, bi-monthly newsletter.

Position: static

position:static is the default value provided by HTML. If we don’t assign any position property to the elements, it will use position:static by default, like in the example above.

With this value, an element is positioned according to the flow of the document, and the helper properties have no effect. This means that if we want to move elements, static is of no use.

Let’s understand this better with an example.

Источник

How to Get HTML Element (X, Y) Position with JavaScript

Getting the X, Y position of an HTML element in JavaScript can be accomplished using the following code:

let element = document.getElementById("example-element"); let x = element.offsetLeft; let y = element.offsetTop; console.log("Element X: " + x); console.log("Element Y: " + y);

Where element is the HTML element whose position you want to retrieve.

The offsetLeft and offsetTop properties give us its X and Y position.

To get the position relative to the viewport (changes on the scroll and resizing), you can do:

let element = document.getElementById("example-element"); let x = element.getBoundingClientRect().left; let y = element.getBoundingClientRect().top; console.log("Element X (relative to viewport): " + x); console.log("Element Y (relative to viewport): " + y);

I hope this quick answer helps. If you need examples, please read along. Also, I will show you how to get the position of the HTML element relative to the right corner and the bottom of the view.

Example

Let’s take a look at an example that demonstrates the above code in action in a real HTML page. Feel free to copy-paste the code and run it on your own setup.

    #example-element    

As you can see, the code logs the position of the blue HTML element into the console just like we defined it in the CSS.

Position Relative to Bottom and Right Corner

The above code showed you how to access the positions from the top and the left corner of the view.

In case you want to get the x, and y position relative to the bottom and right corner of the view, subtract the x, y position from the width and the height of the view.

    #example-element     

Notice that the bottom and right variables change based on the size of the viewport.

Here’s a view with a bit more space to the right. Now the Element Right is at 390 pixels:

By shrinking the window size, the Element Right position shrinks too.

Notice: The (X, Y) Position Doesn’t Change On Scroll

Notice that the x, and y position stays the same if you scroll the page.

For example, let’s make the page high enough so that one can scroll:

    body < height: 5000px; >#example-element     

As you can see from the image, the position remains the same.

Sometimes this behavior is not what you intended. You want to get the position with respect to the visible view.

For example, in the above image, the y position should be closer to 0 because the HTML element is almost at the top of the scrolled view.

How to Get (X, Y) Position Relative to Viewport?

To get the position of the element with respect to the view, you can use the getBoundingClientRect method instead of offsetLeft and offsetTop . getBoundingClientRect returns the size of an element and its position relative to the viewport.

Here is an updated HTML page with a high enough height to allow for scrolling. Beside, there’s a JavaScript call to the function to log the position of the element with respect to the view when scrolling:

    body < height: 5000px; >#example-element    

Thanks for reading. Happy coding!

Источник

Retrieve the position (X,Y) of an HTML element

The X, Y position of an HTML document represents X as horizontal whereas Y vertical position. Here, we will see two examples to get the position i.e.

• Get the position of a specific text on a web page.
• Get the position of buttons on a web page.

Get the position of a specific text on a web page

To get the position of a specific text on a web page, we will use the getBoundingClientRect() method. It provides information about the size of an element and its position relative to the viewport. This will give us the X and Y coordinates on mouseover −

var rect = element.getBoundingClientRect(); document.getElementById('text').innerHTML = 'X Coordinate= ' + rect.x + 'br>' + 'Y Coordinate = ' + rect.y;
 

The values are displayed in the div on mouseover −

div onmouseover="getPositionXY(this)"> X,Y Position = p id='text'>p> div> 

Example

Let us now see the example −

DOCTYPE html> html> head> title>Example X,Y Coordinatetitle> script> function getPositionXY(element) < var rect = element.getBoundingClientRect(); document.getElementById('text').innerHTML = 'X Coordinate= ' + rect.x + 'br>' + 'Y Coordinate = ' + rect.y; > script> head> body> h1>Positionh1> p>To get the position, move the mouse cursor over the below text.p> div onmouseover="getPositionXY(this)"> X,Y Position = p id='text'>p> div> body> html> 
 

Output

On keeping the cursor on the text, the X, Y coordinates will be visible −

Get the position of buttons on a web page

In this example, we will get the position of buttons on a web page. To get the position, we will use the getBoundingClientRect() method. It provides information about the size of an element and its position relative to the viewport. This will give us the X and Y coordinates on click −

function getPositionXY(element)

The values are displayed in the div on mouseover −

p>Get the Coordinates of any of the button positioned below:p> button id='button1' onclick="getPositionXY(this)">Button 1button> button id='button1' onclick="getPositionXY(this)">Button 2button> button id='button1' onclick="getPositionXY(this)">Button 3button> button id='button1' onclick="getPositionXY(this)">Button 4button> br>br> button id='button1' onclick="getPositionXY(this)">Button 5button> button id='button1' onclick="getPositionXY(this)">Button 6button> button id='button1' onclick="getPositionXY(this)">Button 7button> button id='button1' onclick="getPositionXY(this)">Button 8button> 

Example

Let us now see the example −

DOCTYPE html> html> head> title>Coordinates of Buttonstitle> script> function getPositionXY(element) < var rect = element.getBoundingClientRect(); document.getElementById('demo').innerHTML = 'X Coordinates = ' + rect.x + ', ' + 'Y Coordinates = ' + rect.y >script> head> body> h1>Coordinatesh1> p>Get the Coordinates of any of the button positioned below:p> button id='button1' onclick="getPositionXY(this)">Button 1button> button id='button1' onclick="getPositionXY(this)">Button 2button> button id='button1' onclick="getPositionXY(this)">Button 3button> button id='button1' onclick="getPositionXY(this)">Button 4button> br>br> button id='button1' onclick="getPositionXY(this)">Button 5button> button id='button1' onclick="getPositionXY(this)">Button 6button> button id='button1' onclick="getPositionXY(this)">Button 7button> button id='button1' onclick="getPositionXY(this)">Button 8button> p id='demo'>p> body> html> 
 

Output

Click on any of the Button to get the position −

Источник