Ways to attach an item using its lower point instead of its upper coordinate

Question

Ways to attach an item using its lower point instead of its upper coordinate

I am currently working on a poker table project using React. As of now, I have player components that need to be strategically positioned around the table.

https://i.sstatic.net/gX9Ij.png

One challenge I'm facing is that when the screen attribute changes, the position of the top two player boxes changes as well. While this is desired, the issue is that their position is anchored to the top, causing the players to move away from the table. Ideally, I would prefer the anchor to be at the bottom so that the players will stay next to the table.

https://i.sstatic.net/hJuvs.png

javascript html css reactjs

Answer 1

Answer №1

If you opt for absolute positioning in this scenario, consider the following approach:

.player {
    top: 200px; /* define desired distance from top */
    margin-top: -100%; /* adjust element position so bottom aligns with specified top value */
}

However, it is recommended to utilize CSS tables or flexbox for a more effective solution.

Answer 2

If you opt for absolute positioning in this scenario, consider the following approach:

.player {
    top: 200px; /* define desired distance from top */
    margin-top: -100%; /* adjust element position so bottom aligns with specified top value */
}

However, it is recommended to utilize CSS tables or flexbox for a more effective solution.

Answer 3

Answer №2

The origin is typically positioned at the top left corner of an element by default. To position it at the bottom left corner, you must ensure to account for the height of the element in your calculations.

element.X = X;
element.Y = Y + element.height;

I trust this explanation clarifies things for you.

Answer 4

The origin is typically positioned at the top left corner of an element by default. To position it at the bottom left corner, you must ensure to account for the height of the element in your calculations.

element.X = X;
element.Y = Y + element.height;

I trust this explanation clarifies things for you.

Ways to attach an item using its lower point instead of its upper coordinate

Answer №1

Answer №2

Similar questions

Setting up a basic testcafe configuration with ES modules

Converting an array of objects into a dictionary using TypeScript

Having trouble dynamically adding HTML elements in JQuery

Angular binding causing decimal inaccuracies

chrome side column must be set to 100% height

"Adding a class with jQuery on a selected tab and removing it when another tab is clicked

Is Typescript capable of converting ES6 code to ES5 during transpilation?

A guide on adding a hyperlink to a table in Node.js using officegen

Is there a way to nest arrays within arrays in JavaScript?

Adding information to an Excel spreadsheet using JavaScript

Why does the value of my input get erased when I add a new child element?

When attempting to pass an array of objects to a child component, TypeScript raises an error regarding types

Obtaining HTML Elements from Contentful Raw Data for RSS Feeds with Gatsby Plugin Feed

What is the method for extracting individual elements from an object returned by a React hook in Typescript?

Dynamic Pagination with MUI Counting

Organize the array by property name and include a tally for each group

Troubleshooting: CSS Selectors Hover Functionality Not Functioning as

Starting jQuery on embedded websites

Unlocking the power of bitwise operations in VueJS with Javascript

Bootstrap 3 offset doesn't respond to dimensions