These taglibs will position the code that is included within them at the top or bottom of the specified area in the Document Object Model (DOM). You can also embed portlets in your theme. This article provides you with information and examples on how to use these position taglibs.
If you include one of the position taglibs inside a portlet, the default behavior is going to be slightly different depending on whether the portlet is or is not embedded.
Portlet Not Embedded
If the portlet is not embedded, the taglib would include the code at the top or the bottom.
Portlet Is Embedded
If the portlet is embedded, the taglib would include the code inline. That means, in the same position where the portlet is embedded.
In case you want to have an embedded portlet with a position taglib—of which the default behavior is to show the code at the top or the bottom—you need to make use of the attribute position with value
auto in that taglib. Below you can see an example of part of the code of an embedded portlet:
Without Using the Attribute Position:
<liferay-util:html-bottom> <script> console.log('This log will be executed inline.'); </script> </liferay-util:html-bottom>
Using the Attribute Position:
<liferay-util:html-bottom position="auto"> <script> console.log('This log will be executed at the bottom.'); </script> </liferay-util:html-bottom>