<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body x-data="demo">
<h1>
Using Margins With Four-Sided Positioning In CSS
</h1>
<style type="text/css">
/* Creating a relative-position container. */
.container {
position: relative ;
width: 650px ;
height: 200px ;
}
/* Creating an absolute-position element within the container. */
.box {
position: absolute ;
width: 50px ;
height: 50px ;
/*
Set sensible defaults for all of these properties. Then, we will use the
Alpine.js model bindings below to override a subset of these values and
move the box around within its container.
*/
bottom: auto ;
left: auto ;
right: auto ;
top: auto ;
margin: 0 ;
}
</style>
<div
x-ref="container"
tabindex="1"
@mousedown="$refs.container.focus()"
@keydown="moveBox( $event )"
class="container">
<div
class="box"
x-bind:style="boxStyles[ selectedIndex ].styles">
</div>
</div>
<!--
We're using the Alpine.js X-MODEL directive to choose from a collection of style
options. As the selectedIndex is updated, the new set of styles will be applied
to the box above (changing its top/bottom/left/right/margin properties).
-->
<div class="tools">
<select x-model.number="selectedIndex">
<template x-for="( option, i ) in boxStyles">
<option x-text="option.label" :value="i"></option>
</template>
</select>
<button @click="prevOption()">
Prev
</button>
<button @click="nextOption()">
Next
</button>
</div>
<!-- Output the currently-selected styles (for debugging). -->
<textarea
readonly
class="debugger"
x-text="JSON.stringify( boxStyles[ selectedIndex ].styles, null, 4 )">
</textarea>
<script type="text/javascript" src="./main.js" defer></script>
<script type="text/javascript" src="../../vendor/alpine/3.13.5/alpine.3.13.5.min.js" defer></script>
</body>
</html>